CSS媒体查询仅针对iOS设备

Question

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

例如:

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

这也会改变这些宽度视角的Android设备页面的行为？或者我最后弄错了

Answer 1

是的你可以.

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

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

因人而异.

它的工作原理是因为只有Safari Mobile实现-webkit-overflow-scrolling:https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling

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

Answer 2

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

Answer 3

简短回答编号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 4

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

如果你像我一样并且不需要提供完全不同的样式表,另一个选择是以这个问题的选定答案中描述的方式检测运行iOS的设备:检测设备是否为iOS

一旦你检测到iOS设备,你可以使用Javascript(例如document.getElementsByTagName("yourElementHere")[0].setAttribute("class", "iOS-device");,jQuery,PHP或其他任何东西)为你所定位的区域添加一个类,并使用预先存在的样式表相应地设置该类.

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