简单的 CSS 媒体查询不起作用答案

【问题标题】：simple css media queries not working简单的 CSS 媒体查询不起作用
【发布时间】：2013-03-01 02:02:47
【问题描述】：

以下网页在桌面上正确显示，但我不知道为什么它不能在安卓手机上运行（文本的颜色总是蓝色）：

<html>
    <head>
        <style type="text/css">
            @media screen { body { color: blue; } }
            @media handheld { body { color: red; } }
        </style>
    </head>
    <body>
        This is a test!
    </body>
</html>

测试于：

安卓：4.0.4
标准安卓网页浏览器：4.0.4-S7562XXALJ4
铬：25.0.1364.169
火狐：19.0.2

在所有移动浏览器上，将网页显示为计算机屏幕的选项已被禁用。使用媒体查询的在线网页可以正常工作。

我也尝试过仅屏幕/非屏幕对，但仍然无法正常工作。

谢谢！

【问题讨论】：

标签： android css media-queries

【解决方案1】：

尝试以视口大小为目标

@media screen { body { color: blue; } }
@media only screen 
    and (max-width : 420px) { 
    /* Styles */
    body { color: red; }
}

根据您的目标设备视口修改“最大宽度”

【讨论】：

谢谢，这行得通。我避免走这条路线，因为它是一个 hackish 修复 :(，但它会做。