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

Question

The following web page displays correctly on desktop but I can't figure out why it's not working on a android phone(the color of the text is always blue): 以下网页在桌面上正确显示，但我无法弄清为什么它无法在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>

Tested on: 经过测试：

Android: 4.0.4 Android：4.0.4
Standard android web browser: 4.0.4-S7562XXALJ4 标准android网络浏览器：4.0.4-S7562XXALJ4
Chrome: 25.0.1364.169 铬：25.0.1364.169
Firefox: 19.0.2 的Firefox：19.0.2

On all the mobile browsers the option to display web page as on computer screen has been disabled. 在所有移动浏览器上，用于在计算机屏幕上显示网页的选项已被禁用。 The online web pages that use media queries work correctly. 使用媒体查询的在线网页可以正常工作。

I've also tried only screen/not screen pair and it still does not work. 我也尝试过仅屏幕/非屏幕对，但仍然无法正常工作。

Thanks! 谢谢！

Answer 1

Try by targeting the view port size 尝试定位视口尺寸

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

Modify the "max-width" according your targeted device view port 根据目标设备查看端口修改“最大宽度”

简单的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