css - 媒体查询不起作用

Question

我使用媒体查询的 CSS 无法正确检测设备...我的代码：

@media  screen and (min-width: 240px) and (max-width: 320px) {
    #test{
        width:50px;
        height:50px;
        background-color:blue;
    }
}
@media screen and (min-width: 640px) {
    #test{
        width:50px;
        height:50px;
        background-color:red;
    }
}

我希望 div 在 HTC Wildfire 等小型手机上为蓝色，在 iPad Mini 等平板电脑上为红色。

Answer 1

从评论扩展：

小型设备上的浏览器倾向于稍微扩展网页。要获得媒体查询的“真实”维度，请添加

<meta name="viewport" content="initial-scale=1.0" />

到文档的开头。

要检查“渲染”维度，请使用以下内容：

<script type="text/javascript">
window.addEventListener("load",function(){
    var box=document.body.getBoundingClientRect();
    document.getElementById("whatever").value=box.width+" x "+box.height;
},false);
</script>

这可能会或可能不会阻止浏览器本身的缩放设置，但至少会阻止“自动”缩放。

以我自己的经验，某些情况，例如<p>长句子，可能会导致浏览器缩小，使其更像是“句子”。通过指定initial-scale=1.0，Opera Mobile 仍会缩放到其设置（默认为 125%），但仅此而已，长句将自动换行。

Answer 2

尝试在查询中添加屏幕。

@media screen and (min-width: 240px) {
    #test{
        width:50px;
        height:50px;
        background-color:blue;
    }
}
@media screen and (min-width: 640px) {
    #test{
        width:50px;
        height:50px;
        background-color:red;
    }
}