css - 如何使用媒体查询为 iPad 定位 CSS 但排除 Safari 4 桌面？

Question

我正在尝试使用媒体规则将 CSS 仅定位到 iPad。我想排除 iPhone/iPod 和桌面浏览器。如果可能，我还想排除其他移动设备。

我用过

<style type="text/css" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)">

但刚刚发现桌面版 Safari 4 可以读取它。我尝试过使用“481px”而不是“768px”的变体和另一个添加方向的变体:

<style type="text/css" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">

但运气不好。 (稍后我们将为 iPad 嗅探用户代理字符串，但目前该解决方案不起作用。)

谢谢!

更新:桌面版 Safari 现在似乎使用屏幕的宽度和高度，并根据它给自己一个纵向或横向的方向。看起来宽度和高度不会排除桌面浏览器(除非我遗漏了什么)。

https://mislav.net/2010/04/targeted-css/

Answer 1

 media="only screen and (device-width: 768px)"

感谢 Mislav Marohnić 的回答!

这适用于任一方向的 iPad，似乎不包括桌面 Safari。

当我测试 (min-device-width: 768px) 和 (max-device-width: 1024px)当我加宽或缩小窗口时，我可以看到 Safari 4 使用这些样式或忽略它们。在测试 (device-width: 768px) 时，我试图让桌面 Safari 浏览器的宽度恰好为 786px，但我从来没有看到样式。