时间戳

首页 > 解决方案 > CSS 媒体查询未检测到视口宽度的变化

css - CSS 媒体查询未检测到视口宽度的变化

问题描述

我有一个简单的问题。我有一个带有媒体查询的简单 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

标签： cssresponsive-designmedia-queries

解决方案

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

问题出在我的手机有 2 个设备像素的 CSS 像素。在此处找到更多信息：设备像素比到底是什么？

我用这个：

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

</script>

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

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

推荐阅读