是否有 @media 查询仅针对运行 iOS 的设备?
例如:
@media (min-device-width:320px) and (max-device-width:768px) { #nav { yada: yada; } }
这也会改变具有这些设备宽度的 Android 设备上的页面行为吗?
是的你可以。
@supports (-webkit-touch-callout: none) { /* CSS specific to iOS devices */ } @supports not (-webkit-touch-callout: none) { /* CSS for other than iOS devices */ }
YMMV。
它之所以有效,是因为只有 Safari Mobile 实现-webkit-touch-callout:https ://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-touch- callout
-webkit-touch-callout
请注意,@supports这在 IE 中不起作用。IE 将跳过上述两个@support块。要了解更多信息,请参阅https://hacks.mozilla.org/2016/08/using- feature-queries-in-css/。因此建议 不要 使用@supports not。
@supports
@support
@supports not
iOS 上的 Chrome 或 Firefox 怎么样?现实情况是,这些只是 WebKit 渲染引擎的皮肤。因此,只要 iOS 政策不改变,上述内容在 iOS 上的任何地方都适用。请参阅App Store 审核指南中的 2.5.6 。
警告:未来几年,iOS 可能会在任何新的 iOS 版本中取消对此的支持。 您应该更加努力地尝试不需要上面的 CSS。使用了此答案的早期版本,-webkit-overflow-scrolling但新的 iOS 版本将其删除。正如评论者指出的那样,还有其他选项可供选择:转到支持的 CSS 属性并搜索“iOS 上的 Safari”。
-webkit-overflow-scrolling