以下网页在桌面上可以正确显示,但我无法弄清为什么它无法在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


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

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

谢谢!

最佳答案

尝试定位视口尺寸

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


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

关于android - 简单的CSS媒体查询不起作用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/15380188/

10-11 23:25
查看更多