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%)，但不会超过这个值，长句会自动换行。