仅针对 iOS 设备的 CSS 媒体查询
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30102792/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS media query to target only iOS devices
提问by Kevin G
Is there a @media query to target only devices running iOS?
是否有 @media 查询仅针对运行 iOS 的设备？
For example:
例如：
@media (min-device-width:320px) and (max-device-width:768px) {
#nav {
yada: yada;
}
}
Would this also alter the behavior of the page on Android devices with these device widths?
这是否也会改变具有这些设备宽度的 Android 设备上的页面行为？
回答by Jonathan Lin
Yes, you can.
是的你可以。
@supports (-webkit-touch-callout: none) {
/* CSS specific to iOS devices */
}
@supports not (-webkit-touch-callout: none) {
/* CSS for other than iOS devices */
}
YMMV.
天啊。
It works because only Safari Mobileimplements -webkit-touch-callout: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-touch-callout
它有效，因为只有Safari Mobile实现-webkit-touch-callout：https: //developer.mozilla.org/en-US/docs/Web/CSS/-webkit-touch-callout
Please note that @supportsdoes not work in IE. IE will skip both of the above @supportblocks above. To find out more see https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/. It is recommended to notuse @supports notbecause of this.
请注意，@supports在 IE 中不起作用。IE 将跳过上面的两个@support块。要了解更多信息，请参阅https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/。因此建议不要使用@supports not。
Warning: iOS may remove support for this in any new iOS release in the coming years. You should try a bit harder to not need the above CSS.
警告：iOS 可能会在未来几年内在任何新的 iOS 版本中取消对此的支持。您应该更努力地尝试不需要上述 CSS。
回答by bhawkeswood
As mentioned above, the short answer is no. But I'm in need of something similar in the app I'm working on now, yet the areas where the CSS needs to be different are limited to very specific areas of a page.
如上所述，简短的回答是否定的。但是我现在正在开发的应用程序中需要类似的东西，但是 CSS 需要不同的区域仅限于页面的非常特定的区域。
If you're like me and don't need to serve up an entirely different stylesheet, another option would be to detect a device running iOS in the way described in this question's selected answer: Detect if device is iOS
如果您像我一样并且不需要提供完全不同的样式表，另一种选择是以本问题所选答案中描述的方式检测运行 iOS 的设备：检测设备是否为 iOS
Once you've detected the iOS device you could add a class to the area you're targeting using Javascript (eg. the document.getElementsByTagName("yourElementHere")[0].setAttribute("class", "iOS-device");, jQuery, PHP or whatever, and style that class accordingly using the pre-existing stylesheet.
检测到 iOS 设备后，您可以使用 Javascript（例如document.getElementsByTagName("yourElementHere")[0].setAttribute("class", "iOS-device");、jQuery、PHP 或其他任何内容）向目标区域添加一个类，并使用预先存在的样式表相应地设置该类的样式。
.iOS-device {
style-you-want-to-set: yada;
}
回答by Prime
Short answer No. CSS is not specific to brands.
简短回答 否。CSS 并非特定于品牌。
Below are the articles to implement for iOS using media only.
以下是仅使用媒体为 iOS 实现的文章。
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
http://stephen.io/mediaqueries/
http://stephen.io/mediaqueries/
Infact you can use PHP, Javascript to detect the iOS browser and according to that you can call CSS file. For instance
事实上，您可以使用 PHP、Javascript 来检测 iOS 浏览器，并据此调用 CSS 文件。例如
回答by Aparajita
I don't know about targeting iOS as a whole, but to target iOS Safari specifically:
我不知道将 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 */
}
Apparently as of iOS 13 -webkit-overflow-scrollingno longer responds to @supports, but -webkit-touch-calloutstill does. Of course that could change in the future...
显然，从 iOS 13 开始，-webkit-overflow-scrolling不再响应@supports，但-webkit-touch-callout仍然响应。当然，这在未来可能会改变......
