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

简答字号 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 3

如上所述，简短的回答是否定的。但是我现在正在处理的应用程序中需要类似的东西，但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;
}

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设备

4 个答案: