小编典典

CSS媒体查询和JavaScript窗口宽度不匹配

javascript

对于响应式模板,我在CSS中有一个媒体查询:

@media screen and (max-width: 960px) {
 body{
 /*  something */
 background:red;
 }
}

而且,我在调整大小以记录宽度时做了一个jQuery函数:

$(window).resize(function() {
 console.log($(window).width());
 console.log($(document).width()); /* same result */
 /* something for my js navigation */
}

而且CSS检测和JS结果有所不同,我有这个meta:

<meta content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width" name="viewport"/>

我想这是由于滚动条(15像素)所致。我该如何做得更好?


阅读 414

收藏
2020-05-01

共1个答案

小编典典

您对滚动条是正确的,这是因为CSS使用的是设备宽度,而JS使用的是文档宽度。

您需要做的是在JS代码中测量视口宽度,而不是使用jQuery width函数。

function viewport() {
    var e = window, a = 'inner';
    if (!('innerWidth' in window )) {
        a = 'client';
        e = document.documentElement || document.body;
    }
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}
2020-05-01