Question

我有一个简单的问题。我有一个简单的CSS媒体查询：

@media only screen and (max-width: 700px) {
    //some CSS A
}

@media only screen and (min-width: 700px) {
    //some CSS B
}

和主html中的这个元标记

<meta name="viewport" content="width=device-width,initial-scale=1">

我的DOOGEE X5PRO的分辨率为1280x720（根据互联网情况而定），所以我希望通过手机观看时可以使用B CSS。但事实并非如此。为什么？我试过清理数据等。

你可以自己检查：velkahra.skauting.cz

Answer 1

你的CSS看起来没问题。您可以尝试在浏览器上打开控制台，看看您的代码在不同的断点处的行为。

Answer 2

显然我用javascript检查了屏幕的分辨率，发现分辨率更小。永远不要相信互联网。

问题出在某处，因为我的手机有一个CSS像素的2个设备像素。点击此处了解详情：what exactly is device pixel ratio?

我用过这个：

<script type="text/javascript"> 
    window.addEventListener("DOMContentLoaded", function(event) {
        window.alert($(window).width());
    });

</script>

代码中没有错误，除了700px的断点

也许它会帮助一些新手。

CSS媒体查询未检测到视口宽度的更改

2 个答案: