小编典典

CSS媒体查询仅针对iOS设备

all

是否有 @media 查询仅针对运行 iOS 的设备?

例如:

@media (min-device-width:320px) and (max-device-width:768px) {
    #nav {
        yada: yada;
    }
}

这也会改变具有这些设备宽度的 Android 设备上的页面行为吗?


阅读 82

收藏
2022-08-24

共1个答案

小编典典

是的你可以。

@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-callouthttps
://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-touch-
callout

请注意,@supports这在 IE 中不起作用。IE
将跳过上述两个@support块。要了解更多信息,请参阅https://hacks.mozilla.org/2016/08/using-
feature-queries-in-css/。因此建议 不要 使用@supports not

iOS 上的 Chrome 或 Firefox 怎么样?现实情况是,这些只是 WebKit 渲染引擎的皮肤。因此,只要 iOS 政策不改变,上述内容在
iOS 上的任何地方都适用。请参阅App Store 审核指南中的 2.5.6 。

警告:未来几年,iOS 可能会在任何新的 iOS 版本中取消对此的支持。 您应该更加努力地尝试不需要上面的
CSS。使用了此答案的早期版本,-webkit-overflow-scrolling但新的 iOS
版本将其删除。
正如评论者指出的那样,还有其他选项可供选择:转到支持的 CSS
属性
并搜索“iOS
上的 Safari”。

2022-08-24