1

我的网站针对 OS 和 iOS 进行了优化，但是通过 browserstack.com 为 Android 测试它让我对在我的媒体查询中定位 Android 设备感到困惑。

这是适用于 iOS 设备的查询：

#using em based query after reading this article: http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/
@media only screen and (device-width: 20em)

我尝试了各种不同的查询（包括基于 px 的查询），但只想要一个适用于所有/大多数手持式 android 设备的查询。你有这方面的运气吗？谢谢你的想法。

4

4 回答 4

0

如果您想使用媒体查询来定位 Android，我认为您可以通过查询 dpi 来伪造它。

@media screen and (min-resolution: 192dpi) { … }
于 2013-03-23T03:51:56.303 回答
0

假设你的1em = 16px我会使用下面的媒体查询

@media only screen and (min-device-width: 20em) and (max-device-width: 30em)

这将寻找screen宽度在320px和之间的任何设备480px，这对于移动设备来说是一个相当好的标准。

于 2013-03-22T20:53:40.577 回答
0

媒体查询不能用于查找设备类型，您应该为此使用用户代理嗅探。不过， CSS-Tricks上有一个很好的媒体查询资源。

于 2013-03-22T20:39:31.677 回答
0

请在http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries查看演示

似乎device-width: 20em会引起一些问题。所以看看这里。

于 2013-03-22T20:45:40.877 回答