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

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

例如：

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

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

简短回答否。 CSS不是特定于品牌的

以下是仅使用介质为iOS实施的文章

事实上，您可以使用PHP、Javascript来检测iOS浏览器，并据此调用CSS文件。 比如说

---

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

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

一旦检测到iOS设备，您就可以使用Javascript（例如

文档.getElementsByTagName（“yourElementHere”）[0].setAttribute（“class”，“iOS设备”）；

、jQuery、PHP或其他工具向目标区域添加一个类，并使用预先存在的样式表相应地设置该类的样式

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

是的，你可以

@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

：

请注意，

@supports

在IE中不起作用。IE将跳过上述两个

@support

块。要了解更多信息，请参阅。因此，建议使用

@supports not

iOS上的Chrome或Firefox呢？事实上，这些只是WebKit渲染引擎上的皮肤。因此，只要iOS策略不变，上述操作在iOS上随处可见。请参阅中的2.5.6

---

警告：未来几年，iOS可能会在任何新的iOS版本中删除对该功能的支持。您应该更努力地避免使用上述CSS。此答案的早期版本使用了

-webkit overflow scrolling

，但新的iOS版本将其删除。正如评论者所指出的，还有其他选项可供选择：转到nd搜索“iOS上的Safari”。

我不知道如何将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溢出滚动

不再响应

@支持

，但是

-webkit touch callout

仍然响应。当然，这可能会在将来发生变化…

所有设备不仅仅是iOS为什么需要它？您可以使用javascript获取用户代理，并且根据结果，您可以包含一个规范al css文件。-webkit溢出滚动仅在Safari中受支持，这太棒了…谢谢你，我知道这不是一种标准方法，但有时你确实需要iOS的特殊规则，因为…因为它们是苹果的。@carl是的，这忽略了安卓，因为-webkit溢出滚动仅由Safari Mobile支持。@Johnny All biOS上的浏览器基于Safari的Webkit引擎：blog.chromium.org/2016/01/…Chrome for iOS基本上是Safari，上面添加了内容。如果这种情况再次发生变化，请转到并搜索“Safari on iOS only”这就是我使用的。我们的代码知道我们在iPhone上，所以在JS中，我们将文本区域的字体大小更改为16px，这看起来不错，不会影响其他浏览器（包括桌面）