CSS媒体查询仅针对iOS设备[重复]答案

【问题标题】：CSS media query to target only iOS devices [duplicate]CSS媒体查询仅针对iOS设备[重复]
【发布时间】：2023-03-26 17:40:01
【问题描述】：

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

例如：

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

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

【问题讨论】：

所有设备不仅是IOS
为什么需要这个？您可以使用 javascript 获取用户代理，根据结果，您可以包含一个特殊的 css 文件。
stackoverflow.com/questions/3839809/…

标签： css media-queries

【解决方案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/

【讨论】：

【解决方案2】：

如上所述，简短的回答是否定的。但是我现在正在开发的应用程序中需要类似的东西，但是 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 中我们将 text-area 的 font-size 更改为 16px，这看起来不错并且不会影响其他浏览器（包括桌面）

【解决方案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。

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

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

【讨论】：

-webkit-overflow-scrolling 仅在 Safari 中支持，请参阅 developer.mozilla.org/en-US/docs/Web/CSS/…
这太棒了...谢谢您，我知道这不是标准方法，但有时您确实需要针对 iOS 的特殊规则，因为...因为它们是苹果的。
@carl 是的，这会忽略 Android，因为只有 Safari Mobile 支持 -webkit-overflow-scrolling。
@Johnny iOS 上的所有浏览器都基于 Safari 的 Webkit 引擎：blog.chromium.org/2016/01/... 适用于 iOS 的 Chrome 基本上是 Safari，上面添加了一些东西。
如果这种情况再次发生变化，请转到 developer.apple.com/library/archive/documentation/… 并搜索“仅限 iOS 上的 Safari”

【解决方案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 仍然响应。当然这在未来可能会改变......

【讨论】：