我正在尝试使用媒体规则将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)”
感谢MislavMarohnić的回答!
这适用于iPad的任一方向,并且似乎不包括桌面Safari。
在测试时,(min-device-width: 768px) and (max-device-width: 1024px) 我可以看到Safari4使用了样式,或者在扩大或缩小窗口时忽略了样式。在测试时,(device-width:768px)我尝试使桌面Safari浏览器的宽度恰好为786px,但我从未看到过这种样式。
(min-device-width: 768px) and (max-device-width: 1024px)
(device-width:768px)