媒体查询在Android上的行为不符合预期

Question

我有4个媒体查询.第1,第3和第4工作,但第2工作似乎没有激活.

为什么480x720(第二个媒体查询)默认为第一个媒体查询？

@media screen and (max-width: 320px) and (orientation: portrait) { body{background:#F0F;} }
@media screen and (min-width: 321px) and (max-width: 480px) and (orientation: portrait) { body{background:#F00;} }
@media screen and (max-width: 480px) and (orientation: landscape) { body{background:#0F0;} }
@media screen and (min-width: 481px) and (max-width: 800px) and (orientation: landscape) { body{background:#FF0;} }

预期结果:

实际发生了什么:

为什么480x720(第二个媒体查询)默认为第一个媒体查询？

Answer 1

我是android和CSS的新手.

我解决了android没有给我们的index.html文件的标题中的一行实际大小:

<meta name="viewport" content="width=device-width" />

从那时起,我的CSS文件就达到了我的预期!

Answer 2

所以在做了LOADS的研究之后我得出了这个结论,Android手机说它们是480px×720px(800px或854px)实际上不是,他们使用更高的屏幕密度来使元素看起来更大,所以它们实际上以320px运行XXX,但如果用户愿意,用户可以将分辨率更改为较低的规格.媒体查询无效的原因是因为尺寸与相关设备无关.

如果您在SDK上我将屏幕密度更改为160以适应480px宽.

我可以确认我已经在SDK和2x手机上测试了这个.

注意:这是我的个人经历,对于其他用户可能会有所不同

Answer 3

我认为您需要在媒体查询中进行设备分辨率检测

@media (-webkit-min-device-pixel-ratio: 1.5),  
       (-o-min-device-pixel-ratio: 3/2),  
       (min--moz-device-pixel-ratio: 1.5),  
       (min-device-pixel-ratio: 1.5) {  
       /* high resolution styles */  
}  

查看David Calhoun关于移动最佳实践的优秀文章.

Answer 4

我在使用Android平台的Cordova应用程序时遇到了同样的问题.感谢最后一个答案,我试图找出媒体查询与设备屏幕宽度之间的差异.

我第一次尝试:

@media only screen and (max-device-width: 480px) { ... }

匹配HTC Desire HD |等设备 三星Galaxy S.但我也必须对三星Galaxy Note进行特定更正,所以我用过:

@media only screen and (min-device-width: 481px) { ... }

但是,如前所述,这些分辨率并没有像Web视图中那样真正使用,像素密度的值也发生了变化.

所以我想知道在DHD和SGS中识别了多少像素的宽度,然后在SGN中:

window.innerWidth

对于480px宽度的手机,我实际上已经识别出320px.对于800px Galaxy Note,我只识别了500px.当我看到它时,我调整了我的媒体查询并且它有效.