6

有谁知道一个很好的现代 CSS hack，只针对 iPhone 和 iPod Touch 上的移动 safari？

我一直在看@media screen and (max-device-width: 480px)，但那是 3 年前的事情，现在与 Nexus S 匹配。

（这是为了解决一个微妙的布局问题。我意识到浏览器嗅探是邪恶的等等。）

4

5 回答 5

8

http://cssuseragent.org欢迎来到黑暗面。

于 2012-07-13T12:33:06.877 回答
3

您可以使用only screen and (-webkit-min-device-pixel-ratio: 2)

于 2012-07-13T12:24:09.237 回答
1

你也可以要求-webkit-min-device-pixel-ratio: 2。我不相信目前报告任何高于 2 的浏览器（尽管有些报告较低，所以使用 min-ratio） - 但是，这不包括 iPhone 3GS 和非视网膜 iPod Touch 设备。对于那些，你必须做一些用户代理嗅探。

于 2012-07-13T12:24:57.060 回答
0

针对网络上特定设备的唯一方法是检查用户代理字符串。所有苹果设备在用户代理字符串中都有它们的名称。例如，iphone 将有“iphone”，而 ipod 将有“ipod”。使用它来动态应用或加载 css。

于 2012-07-13T12:24:40.180 回答
0

如果您只需要在手机上定位 Safari，只需在此 hack 中添加媒体查询：

@media screen and (max-width: 767px) {
    _::-webkit-full-page-media, _:future, :root .safari_only {
        padding: 10px; //or any property you need
    }
}

并且不要忘记将.safari_only类添加到您要定位的元素中，例如：

<div class='safari_only'> This div will have a padding:10px in a mobile with Safari  </div>

一个细节：这也会影响 Android 设备中的 Safari 浏览器，但是......无论如何，谁在 Android 设备中使用 Safari :)

于 2017-03-31T20:42:53.907 回答