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

Posted 2023-03-06

【中文标题】媒体查询在 Android 上的行为不符合预期

【英文标题】：Media queries not behaving as expected on Android

【发布时间】：2011-08-28 05:16:56

【问题描述】：

我有 4 个媒体查询。第 1、3、4 个有效，但第 2 个似乎没有激活。

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

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

预期结果：

实际情况：

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

【问题讨论】：

@Kevin Peno，我不知道这意味着什么，哈哈，但理论上它应该按原样解决问题，但它不想这样做！我已经尝试了数百种查询变体，但似乎仍然无法正常工作。

【参考方案1】：

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

在您的 html 头部 <meta character...> 标记下方的行中插入此 sn-p。

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

【讨论】：

解决了我的问题，只是显示问题让我抓狂。

【参考方案2】：

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

【参考方案3】：

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

在寻址 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" />希望对其他人有所帮助。

【讨论】：

(max-width:850px) and (max-width:550px) 不是在做同样的事情。也可以只检查大于 550 像素吗？

【参考方案4】：

我是 android 和 CSS 的新手。

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

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

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

【参考方案5】：

我在为 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

对于 480 像素宽度的手机，我实际上已识别出 320 像素。对于 800 像素的 Galaxy Note，我只识别了 500 像素。当我看到这一点时，我调整了我的媒体查询并且它起作用了。

【参考方案6】：

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

@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。

【参考方案7】：

所以在进行了大量研究之后，我得出了这个结论，声称它们是 480 像素 x 720 像素（800 像素或 854 像素） 的 Android 手机实际上并非如此，它们使用更高的屏幕密度来制作元素看起来更大，因此它们实际上以 320px by XXX 运行，但用户可以根据需要将分辨率更改为较低的规格。媒体查询不起作用的原因是尺寸与相关设备无关。

如果您使用 SDK，我将屏幕密度更改为 160 以适应 480 像素宽。

我可以确认我已经在 SDK 和 2x 手机上对此进行了测试。

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