Question

以下网页在桌面上正确显示，但我无法弄清楚为什么它不能在Android手机上工作（文字颜色总是蓝色）：

<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>

经过测试：

Android：4.0.4
标准Android网页浏览器：4.0.4-S7562XXALJ4
Chrome：25.0.1364.169
Firefox：19.0.2

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

我也只尝试过屏幕/非屏幕对，但它仍无效。

谢谢！

Answer 1

尝试定位视口尺寸

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

根据目标设备视图端口修改“max-width”

简单的css媒体查询不起作用

1 个答案: