媒体查询不适用于移动设备

Question

我为移动设备创建了一个样式表。我加载它：

<link rel="stylesheet" media="handheld, screen and (max-width: 650px)" href="/mobile.css?t=<?php echo rand(); ?>" />

在我的文件中：

@media handheld, screen and (max-width: 650px) {
     -- Styles here
}

@media handheld, screen and (max-width: 446px) {
     -- Styles here
}

当我调整浏览器大小时它有效，但出于某种原因，至少在Android上我看到了正常的网页，任何想法？

Answer 1

为什么会出现这种情况有很多原因：

1. 您的Android不支持媒体查询。有一些Android设备无法识别媒体查询，您的机器人可能就是其中之一

2. 您的媒体查询未被解释为您认为它的解释方式。您是否正在寻找＆＃34;掌上电脑，（屏幕和最大宽度：650px） ＆＃34;，还是必须是最大宽度为650px的手持式屏幕？如果你期待第一个，你实际上可能会得到后者。如果是这种情况，那么您可能无法触发该代码，因为很少有智能手机将自己注册为＃34;手持设备。＆＃34;

3. 您的屏幕宽度不是您想象的那样。仅仅因为您的屏幕是1.5＆＃34;通过3＆＃34;，它并不意味着你的分辨率最高可达650px甚至446px。由于这些智能手机可以实现高密度，您的机器人实际上可能具有高于台式机显示器的分辨率。例如，iPhone5只会读取您的第一个查询，而且只能在纵向模式下读取，因为它的最小边是640px，较长边是1136px。 Android操作系统支持的最大分辨率是高达2560x1600分辨率！）