我有一个在桌面和 Android 设备上看起来很棒的网站,但是某些 CSS(例如background-attachment:fixed
with background-size:cover
)与 iOS 设备(尤其是 iPhone)不“兼容”。
我找到了一个替代方案,这样它至少在 iPhone 上看起来还不错,我使用媒体查询添加它,如下所示:
@media all and (max-width:414px) {
.panel {
background-attachment:scroll;
}
}
这些样式将仅应用于最大宽度为 414px 的设备(iPhone 7 plus 及以下版本)......但我发现它们也将应用于代码正常工作而不使用该替代方案的 Android 设备。
有没有办法用 CSS 检测设备是否是 iOS 以在这种情况下专门添加该规则?
这些媒体查询仅适用于 iPhone。
iPhone 4 和 4s
iPhone 5、5s、5c 和 5se
iPhone 6、6s、7 和 8
iPhone 6+、7+ 和 8+
iPhone X
来源:https ://css-tricks.com/snippets/css/media-queries-for-standard-devices/
您可以查看更多设备。