媒体查询在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 by 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's excellent article on mobile best practices。

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) { ... }

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

所以我想知道在DHD和SGS中识别出宽度有多少像素，然后在SGN中识别：

window.innerWidth

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

Answer 5

以下是我在经验中发现的一些事情，这可能是由于更高的分辨率检测。 我最喜欢的测试手机是纵向视图中的320px（最大设备宽度）X 480px（最大设备宽度）。但根据我使用的移动浏览器，最大宽度可达850px！ Opera mobile使用850px作为其默认的最大宽度，即使它位于max-device-width 320px的设备上。更好的是;此设备上内置的Andriod浏览器的默认最大宽度为550px。 Dolphin默认为相同的最大宽度，550px。我通常不会在FireFox手机上进行测试，但由于它是基于Gecko的浏览器，如Opera，如果它属于850px范围，我不会感到惊讶。有人知道或测试过吗？

我在寻址320 X 480设备时通常使用3条件媒体查询。

@media all and (max-width:850px) and (max-width:550px) and (max-device-width:320px) {..}

我通常也会将此元标记放在我的主页面中的代码中

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

以下似乎没有帮助我，那时我做了一些研究并找出了上面的信息。 <meta name="viewport" content="width=device-width" />希望它可以帮助别人。

Answer 6

由于手机是一个不断增长的黑洞，分辨率混乱，你需要告诉他们识别自己。您还需要将缩放比例设置为1并删除用户缩放。当我把它放在我的代码中时，它对我有用。

在<meta character...>标记下方的行上将此代码段插入HTML的开头。

<!-- Check Device Width so Media Queries will work -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Answer 7

1. 将所有px值转换为em值，除以16（因此16px将变为1 em）。这确保了无论使用哪种字体，该大小都具有正确的比例。
2. 添加到您的元视口：target-densitydpi=medium-dpi。这可以确保em - 大小在所有（大多数？）设备上的行为相同