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

Question

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

例如：

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

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

Answer 1

简答号 CSS 不特定于品牌。

以下是 iOS 仅使用媒体实施的文章。

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

http://stephen.io/mediaqueries/

其实你可以使用PHP, Javascript 来检测iOS 浏览器，根据它你可以调用CSS 文件。例如

http://www.kevinleary.net/php-detect-ios-mobile-users/

Answer 2

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

如果您像我一样不需要提供完全不同的样式表，另一种选择是检测设备运行 iOS 在此问题中选择的方式答案：Detect if device is iOS

检测到 iOS 设备后，您可以使用 Javascript 向目标区域添加 class（例如 document.getElementsByTagName("yourElementHere")[0].setAttribute("class", "iOS-device");、jQuery、PHP 或其他什么，并使用预先存在的样式表相应地设置 class 的样式。

.iOS-device {
      style-you-want-to-set: yada;
}

Answer 3

是的，你可以。

@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

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

Chrome 或 iOS 上的 Firefox 怎么样？事实上，这些只是 WebKit 渲染引擎的外壳。因此，只要 iOS 政策不变，上述内容在 iOS 上无处不在。参见 App Store Review Guidelines.

中的 2.5.6

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

Answer 4

我不知道如何将 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 仍然响应。当然，将来可能会改变...

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

CSS media query to target only iOS devices

css

media-queries