logo标签列表

CSS媒体查询以仅针对iOS设备

cssmedia-queries
204

是否有一种@media查询可以仅针对运行iOS的设备进行定位？

例如：

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

这是否也会改变在这些设备宽度下的 Android 设备上页面的行为？

所有设备，不仅限于 IOS。 - icode03
为什么需要这个？你可以使用JavaScript获取用户代理，根据结果包含特殊的CSS文件。 - webcodecs
https://dev59.com/xm865IYBdhLWcg3wZNnT - Prime
1
@webcodecs - 通常情况下（参见：最小权力原则），如果可以通过HTML或CSS实现某些功能，那么应该使用前者技术来实现。并不是说我们永远不应该使用JS来实现表现效果，但如果CSS可以提供所需的结果，那么JS就是多余的。 - Rounin
4个回答
453

可以的。

@supports (-webkit-touch-callout: none) {
  /* CSS specific to iOS devices */ 
}

@supports not (-webkit-touch-callout: none) {
  /* CSS for other than iOS devices */ 
}

各人因素而异。

之所以有效，是因为只有Safari Mobile 实现了-webkit-touch-callout：https://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 Review Guidelines中的 2.5.6。

警告：iOS 可能会在未来几年的新版本中删除对此的支持。您应该尽力避免需要以上的CSS。本答案的早期版本使用了-webkit-overflow-scrolling，但新的iOS版本将其删除。正如一位评论者指出的那样，还有其他可供选择的选项：转到支持的 CSS 属性并搜索“Safari on iOS”。

2
-webkit-overflow-scrolling仅在Safari中受支持，请参见https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling。 - Jonathan Lin
7
太棒了！谢谢你，我知道这不是一种标准方法，但有时候你确实需要为iOS制定特殊规则，因为...嗯，因为它们是苹果。 - Emil Borconi
2
@carl 是的，这个忽略了Android，因为-webkit-overflow-scrolling只被Safari移动版本支持。 - Jonathan Lin
6
在iOS上，所有的浏览器都是基于Safari的Webkit引擎的：blog.chromium.org/2016/01/... Chrome for iOS本质上就是在Safari引擎上添加了一些内容。 - Jonathan Lin
10
如果这种情况再次发生，请访问https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html，并搜索“仅适用于iOS的Safari”。 - Nicholas Shanks
显示剩余12条评论
17

我不确定是否针对整个iOS系统，但是要专门针对iOS Safari：

@supports (-webkit-touch-callout: none) {
   /* CSS specific to iOS devices */ 
}

@supports not (-webkit-touch-callout: none) {
   /* CSS for other than iOS devices */ 
}

据称，在iOS 13中，-webkit-overflow-scrolling不再响应@supports，但-webkit-touch-callout仍然响应。当然，这在将来可能会改变...

11

如上所述，简短的答案是否定的。但是在我现在正在开发的应用程序中，我需要类似的东西，但CSS需要不同的区域仅限于页面的非常特定的部分。

如果您和我一样，并且不需要提供完全不同的样式表，另一个选项是检测运行iOS的设备，方法如此问题中所述的选定答案：Detect if device is iOS

一旦您检测到了iOS设备，就可以使用JavaScript（例如document.getElementsByTagName("yourElementHere")[0].setAttribute("class","iOS-device");）、jQuery、PHP或其他方式向目标区域添加一个类，并使用现有的样式表相应地设置该类的样式。

.iOS-device {
      style-you-want-to-set: yada;
}
这是我使用的代码。我们的代码知道我们在iPhone上，因此在JS中，我们将文本区域的字体大小更改为16px，这看起来很好，不会影响其他浏览器（包括桌面）。 - Jacek
8
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接