小编典典

如何使用媒体查询将iPad的CSS定位为目标,但排除Safari 4桌面?

css

我正在尝试使用媒体规则将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目前似乎使用屏幕的宽度和高度,并根据其纵向或横向进行显示。宽度和高度似乎并不能排除桌面浏览器(除非我遗漏了某些东西)。


阅读 382

收藏
2020-05-16

共1个答案

小编典典

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,但我从未看到过这种样式。

2020-05-16