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

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
铬：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; }
}

根据目标设备查看端口修改“最大宽度”

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2013-03-13 08:39:01

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2013-03-13 08:39:01

解决方案1
0 已采纳 2013-03-13 08:39:01