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野火等小型手机上是蓝色的，在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;
    }
}

媒体查询不起作用

2 个答案: