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

我已经为移动设备创建了一个样式表。我用这个加载它:

<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 上我看到了正常的网络，知道吗？

最佳答案

发生这种情况的原因有很多:

您的 Android 不支持媒体查询。有少数 Android 设备无法识别媒体查询，您的机器人可能就是其中之一。
您的媒体查询未按照您认为的方式进行解释。您是在寻找“手持设备，(屏幕和最大宽度:650px)”，还是必须是最大宽度为 650px 的手持屏幕？如果您期待第一个，您实际上可能会得到后者。如果是这种情况，那么您可能永远不会触发该代码，因为很少有智能手机将自己注册为“手持设备”。
您的屏幕宽度不是您想象的那样。仅仅因为您的屏幕是 1.5"x 3"，并不意味着您的分辨率最高为 650 像素或甚至 446px。由于这些智能手机可以实现高密度，您的机器人实际上可能比桌面显示器具有更高的分辨率。例如，iPhone5 只会读取您的第一个查询，并且只会在纵向模式下读取，因为它的最小边是 640px，而较长的边是 1136px。 Android 操作系统支持的最大分辨率高达 2560x1600!)

关于android - 媒体查询不适用于移动设备，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13804199/