15

我有 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;} }

预期：

第一个媒体查询 CSS 输出 第二次媒体查询 CSS 输出 第三媒体查询 CSS 输出 第 4 次媒体查询 CSS 输出

实际发生了什么：

第二次媒体查询失败 第一次媒体查询通过 第三次媒体查询通过 第四次媒体查询通过

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

4

7 回答 7

25

我是android和CSS的新手。

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

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

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

于 2012-12-19T21:18:42.957 回答
13

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

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

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

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

于 2011-05-19T09:12:39.997 回答
9

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

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

于 2011-11-18T04:11:48.430 回答
8

在为 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 像素。当我看到这一点时，我调整了我的媒体查询并且它起作用了。

于 2012-10-12T08:22:38.757 回答
2

以下是我在经验中发现的一些事情，这可能是由于更高分辨率的检测。我最喜欢的测试手机是 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) {..}

我也通常将这个元标记放在我的页眉中的主页面输入代码here

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

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

于 2013-02-20T18:30:02.883 回答
1

由于手机是一个不断增长的分辨率混乱黑洞，你需要告诉他们识别自己。您还需要将缩放设置为 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" />
于 2015-09-07T17:54:18.730 回答
0
  1. 通过将所有 px 值除以 16 将它们转换为 em 值（因此 16px 将变为 1 em）。这样可以确保无论使用哪种字体，该大小都具有正确的比例。
  2. 添加到您的元视口：target-densitydpi=medium-dpi. 这可以确保em- 大小在所有（大多数？）设备上表现相同
于 2014-06-16T14:27:04.370 回答