我的网站针对OS和iOS进行了优化,但通过www.example.com对Android进行测试browserstack.com,让我对媒体查询中针对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条答案
按热度按时间cuxqih211#
媒体查询不能用来查找设备类型,你应该使用用户代理嗅探。不过CSS-Tricks上有一个很好的媒体查询资源。
uyhoqukh2#
请查看http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries上的演示
看起来
device-width: 20em
会引起一些问题。所以看看这里。6kkfgxo03#
假设您使用
1em = 16px
,我将使用下面的media查询这将查找宽度在
320px
和480px
之间的任何screen
设备,这是移动的设备的一个相当好的标准。cwxwcias4#
如果你想使用媒体查询来针对Android,我认为你可以通过查询dpi来伪造它。