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

一尘不染

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像素）所致。我该如何做得更好？

阅读 392

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