针对iPad的Safari浏览器(仅限于)针对iPad和更低版本的Css媒体查询
问题描述:
还有其他几个帖子要求提供类似的解决方案,但我一直无法获得任何发布的答案以供我们使用。我们需要针对Safari浏览器在iPhone和iPad针对iPad的Safari浏览器(仅限于)针对iPad和更低版本的Css媒体查询
/* Safari 7.1+ */
@media only screen and (max-device-width: 768px),
only screen and (-webkit-min-device-pixel-ratio:0) {
.hero-section {
sa-search-nav ion-row {
background: none;
}
.search-form {
ion-col.select {
margin-top: 0px;
margin-left: 0px;
}
}
}
form.search-form {
min-height: 300px;
}
}
答
这里没有魔法,CSS媒体查询是不是太厉害呢,来完成你想要的东西。任何最大宽度为768px的设备都将遵循相同的CSS规则。
我想你所需要的就是一个黑客:
@media only screen and (max-device-width: 768px),
only screen and (-webkit-min-device-pixel-ratio: 0) {
// Safari 6.2,7.1+
_::-webkit-full-page-media, _:future, :root {
.hero-section {
sa-search-nav ion-row {
background: none;
}
.search-form {
ion-col.select {
margin-top: 0px;
margin-left: 0px;
}
}
}
form.search-form {
min-height: 300px;
}
}
}
即使这一点,但是,不能保证这个代码将仅在移动设备上运行。请注意,上面的代码是SCSS,而不是CSS。我相信你也是。请尝试一下,让我知道。感谢Jeff Clayton。