如何针对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现在使用屏幕的宽度和高度,并根据它自定义纵向或横向.宽度和高度看起来不会排除桌面浏览器(除非我遗漏了一些东西).

http://mislav.uniqpath.com/2010/04/targeted-css/

Answer 1

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

感谢MislavMarohnić的答案!

这适用于iPad的任何方向,似乎排除桌面Safari.

当我测试时,(min-device-width: 768px) and (max-device-width: 1024px) 我可以看到Safari 4使用样式或忽略它们,因为我扩大或缩小了窗口.在测试时,(device-width: 768px)我试图使桌面Safari浏览器的宽度恰好为786px,但我从来没有看到它的样式.