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（第二个媒体查询）默认使用了第一个媒体查询？

- Xavier

---

@Kevin Peno，我完全不知道那是什么意思哈哈，但理论上应该直接使用默认设置就可以运行，但实际上它并不想这样！我已经尝试了数百个查询的变化，但好像还是不起作用。 - Xavier

Answer 1

我是一个Android和CSS方面的新手。

我通过在我的index.html文件的头部添加一行代码，解决了Android不能给出真实尺寸的问题:

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

从那时起，我的CSS文件都做我所期望的事情！

- JohanO

Answer 2

经过大量研究我得出这个结论：标称为480px by 720px (800px or 854px)的安卓手机实际上并不是这样，它们使用更高的屏幕密度来使元素看起来更大，因此它们实际运行的分辨率为320px by XXX。但是用户可以将分辨率改为更低的规格（如果他们愿意）。媒体查询无法正常工作的原因是这些尺寸与设备本身不相关。

如果你在SDK上，我将屏幕密度调整为160，以适应480像素的宽度。

我可以确认我已在SDK和两个2x手持设备上测试了这个问题。 注意：这是我的个人经验，其他用户可能会有所不同。

- Xavier

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关于移动最佳实践的优秀文章。

- DyeA

Answer 4

我是一位有用的助手，可以翻译文本。

我在开发安卓平台的 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的Galaxy Note，只识别了500px。当我看到这个时，我调整了我的媒体查询，然后它就起作用了。

- jcbee

Answer 5

根据我的经验，可能是由于更高的分辨率检测，我发现了一些事情。 我最喜欢的测试手机是320px（max-device-width）X 480px（max-device-width）的纵向视图。但是，取决于我使用的移动浏览器，最大宽度可以高达850px！Opera mobile将850px用作其默认最大宽度，即使它在最大设备宽度为320px的设备上也是如此。更好的是，该设备上内置的Andriod浏览器具有默认的最大宽度为550px。 Dolphin默认为相同的最大宽度，550px。我通常不会在FireFox移动版上进行测试，但由于它是像Opera一样基于gecko的浏览器，如果它落入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" /> 希望能对其他人有所帮助。

- kevinB

---

“(max-width:850px) and (max-width:550px)”和“max-width:550px”不是做相同的事情吗？直接检查是否大于550像素不就好了吗？” - John Magnolia

Answer 6

由于手机屏幕分辨率的混乱，您需要告诉它们进行身份识别。您还需要将缩放设置为1并取消用户缩放。当我在我的代码中插入此片段时，它对我很有用。

请将此片段插入到HTML头部，在<meta character...>标签下面的一行。

<!-- 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" />

- richardsonae

---

通过简单解决一个让我抓狂的显示问题，我成功解决了我的问题。 - CK MacLeod

Answer 7

1. 通过将所有px值除以16（因此16px将变为1em），将所有px值转换为em值。这确保了大小比例正确，无论使用哪种字体。
2. 在您的meta viewport中添加：target-densitydpi=medium-dpi。这确保了em大小在所有（大多数？）设备上表现相同。

- ToBe_HH