Jquery 响应性设计，媒体查询宽度和实际宽度之间的差异

抱歉，如果描述太长，我只是想提供尽可能多的信息。
最近我遇到了一个问题（我已经解决了，但我不明白为什么会发生这种情况）。
问题是，当您调整浏览器的大小（例如宽度768px）时，媒体查询不起作用。为了工作，我不得不将浏览器的宽度再减少20-30px左右

很快，768px媒体查询在宽度小于750px时工作。 这是简化的代码。
HTML:

不起作用的代码：

ww = document.body.clientWidth;// i take this on window resize and on load
var adjustMenu = function() {
    if (ww < 768) {
        if (!$("#nav").hasClass("active")) {
            $("#nav").hide();
        } else {
            $("#nav").show();
        }
    ...

---

有人能告诉我为什么有大约20-30px的间隙，媒体查询无法工作吗？

。clientWidth

返回元素的内部宽度，即它不包括边框、边距或垂直滚动条宽度

介质查询中的[min | max]-width介质功能返回渲染表面或窗口的宽度

这就是你的不同之处

您可以使用

window.innerWidth

；它包括滚动条宽度

---

要获得处理所有浏览器怪癖的极其彻底的解决方案，请参见

滚动条有多宽？我没有修改滚动条的任何内容，因此它是默认的，我相信它大约是10-15px。感谢您提供的信息。很遗憾，我没有错误的版本，但如果我有时间，我会尝试复制它，并尝试这个。但我相信这可能是问题所在。

@media screen and (max-width: 768px) 
{
    div#wrapper
    {
        max-width:768px;
        margin:0 auto;
    }
    a.logo
    {
        display:block;
        float:left;
        width:80%;
        padding:25px 0;
        height:33px;
    }
    a#menu_button
    {
        width:20%;
        float:left;
        display:block;
        padding:50px 0 15px;
        height:18px;
    }
    /* menu
    ----------------------*/
    nav,
    #nav
    {
        width:100%;
        float:left;
        display:none;
    }
    ul#menu ul
    {
        display:none;
    }
    ul.sub.active
    {
        display:block !important;
    }
    ul#menu li
    {
        float:none;
    }
    ul#menu a
    {
        width:100%;
        padding:20px 0;
        text-align:left;
        text-indent: 70px;
        display:block;
        margin-top: 1px;
    }
}

@media screen and (min-width: 769px) 
{
    div#wrapper
    {
        max-width:960px;
        margin:5px auto;
    }
    a.logo
    {
        display:block;
        float:left;
        padding:20px 35px;
    }
    a#menu_button
    {
        display:none;
    }
    /* menu
    ----------------------*/
    nav,
    #nav
    {
        float:right;
        display:block;
    }
    .activemobile
    {
        display:block !important;
    }
    ul#menu li
    {
        float:left;
    }
    ul#menu a
    {
        width:90px;
        padding:50px 0 5px;
        display:block;
        margin: 0 0 0 2px;
    }
    ul#menu ul
    {
        display:none;
        position:absolute;
        margin-left:2px;
        right:0;
    }
    ul#menu li:hover ul
    {
        display:block;
        z-index:999;
    }
    ul#menu ul li
    {
        float:left;
    }
    ul#menu ul li a
    {
        width:80px;
        padding:5px;
        font-size:12px;
        margin:2px 0 0 2px;
    }
    ...
}

ww = document.body.clientWidth;// i take this on window resize and on load
var adjustMenu = function() {
    if (ww < 768) {
        if (!$("#nav").hasClass("active")) {
            $("#nav").hide();
        } else {
            $("#nav").show();
        }
    ...

var adjustMenu = function() {
    if (Modernizr.mq('(max-width: 768px)')) {
        if ($("#nav").hasClass("active"))
            $("#nav").show();
        else
            $("#nav").hide();
...