我正在尝试使用媒体规则将 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 现在似乎使用屏幕的宽度和高度,并根据它给自己一个纵向或横向的方向。看起来宽度和高度不会排除桌面浏览器(除非我遗漏了什么)。
最佳答案
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,但我从来没有看到样式。
关于css - 如何使用媒体查询为 iPad 定位 CSS 但排除 Safari 4 桌面?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2678297/