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

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

例如:

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

这会改变 Android 设备上页面的行为吗？

237470 次浏览
小开

简短的回答是否定的。 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/

小开

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

如果你像我一样，不需要提供一个完全不同的样式表，另一个选择就是检测一个运行 iOS 的设备，这个问题的选择答案是: 检测设备是否是 iOS

一旦你发现了 iOS 设备，你就可以使用 Javascript (例如 document.getElementsByTagName("yourElementHere")[0].setAttribute("class", "iOS-device");，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 手机实现了 -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 上的任何地方都适用。请参阅 应用程序商店评审指南中的2.5。

警告: iOS 可能会在未来几年的新版本中取消对此的支持。你应该更努力一点，不需要上述 CSS。这个答案的早期版本使用了 -webkit-overflow-scrolling，但是新的 iOS 版本删除了它。正如一位评论者指出的那样，还有其他选项可供选择: 进入 支持的 CSS 属性并搜索“ 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 */
}

显然，在 iOS13-webkit-overflow-scrolling不再响应 @supports，但是 -webkit-touch-callout仍然响应。当然，这种情况在未来可能会改变。


提交答案