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

我有4个媒体问题。第一，第三和第四个工作，但第二个似乎没有激活

为什么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（第二次媒体查询）默认为第一次媒体查询？

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

@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;} }

如果你在SDK上，我将屏幕密度降低到160，以适应480px宽

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

---

注意：这是我的个人体验，其他用户可能会有所不同

我认为您需要在媒体查询中按照以下方式进行设备分辨率检测：

@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 */  
}  

---

检查。

我在为Android平台开发Cordova应用程序时遇到了同样的问题。感谢上一个答案，我试图找出我的媒体查询和设备屏幕宽度之间的差异

我首先尝试：

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

为了匹配HTC Desire HD | Samsung Galaxy S等设备，我还必须对Samsung Galaxy Note进行具体修改，因此我使用了：

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

但是这些分辨率，如前所述，并不像在web视图中那样使用，像素密度的值发生了变化

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

window.innerWidth

---

对于480px宽的手机，我实际上已经识别了320px。对于800px的星系笔记，我只识别了500px。当我看到这一点时，我调整了我的媒体查询，它成功了。

我是android和CSS的新手

我用index.html文件头中的一行解决了android没有给出实际大小的问题：

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

---

从那时起，我的CSS文件达到了我的预期

以下是我在经验中发现的一些东西，可能是由于更高分辨率的检测。 在纵向视图中，我最喜欢的测试手机是320px（最大设备宽度）x480px（最大设备宽度）。但根据我使用的手机浏览器，最大宽度可以达到850px！！Opera mobile使用850px作为其默认最大宽度，即使其在最大设备宽度为320px的设备上。更好的是；此设备上的内置Andriod浏览器的默认最大宽度为550px。Dolphin默认为相同的最大宽度550px。我通常不会在FireFox mobile上进行测试，但由于它是一款基于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" />

下面的内容似乎对我没有帮助，就在那时，我做了更多的研究，找到了上面的信息。

希望它能帮助其他人

通过将所有px值除以16将其转换为em值（因此16px将变为1em）。这可以确保，无论使用哪种字体，该大小都具有正确的比例

添加到元视口：

目标密度dpi=中等dpi

。这确保了

em

-大小在所有（大多数？）设备上的行为相同

---

由于手机是一个不断增长的分辨率混乱的黑洞，你需要告诉他们自己的身份。您还需要将缩放设置为1，并取消用户缩放。当我把它放进我的代码中时，它对我来说就是一个窍门

将此代码段插入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" />

@Kevin Peno，我不知道这是什么意思lol，但理论上它应该按原样工作，但它不想！我尝试了数百种不同的查询，但似乎仍然不起作用。是不是

（最大宽度：850px）和（最大宽度：550px）

也在做同样的事情。还不如检查一下大于550px？简单地解决了一个让我发疯的显示问题。