CSS 媒体查询不会检测视口宽度的变化

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检查了屏幕的分辨率，发现分辨率要小得多。永远不要相信互联网。

问题在于我的手机有 2 个 CSS 像素的设备像素。 在此处查找更多信息：设备像素率到底是多少？

我用了这个：

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

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

也许它会帮助周围的一些新手。