媒体查询不适用于手机

Question

我已经为移动设备创建了样式表。与此IM加载它：

<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. 您的媒体查询没有被解释，您认为它是如何被解释的。您是否在寻找“掌上电脑，（屏幕和最大宽度：650px）”，还是必须是最大宽度为650px的手持屏幕？如果你期待第一个，你可能会得到后者。如果是这样的话，那么你可能永远不会触发该代码，因为很少有智能手机将自己注册为“手持设备”。

3. 你的屏幕宽度不是你认为的那样。仅仅因为你有一个1.5英寸×3英寸的屏幕，这并不意味着你的分辨率达到了650px甚至446px。由于这些智能手机可以达到的高密度，您的机器人实际上可能比您的台式机显示器具有更高的分辨率。例如，iPhone5只会读取您的第一个查询，并且只能在肖像模式下阅读，因为它的最小边是640px，长边是1136px。 Android OS支持的最高分辨率是2560x1600！）