jquery - 响应式设计，媒体查询宽度与实际宽度的区别

Question

抱歉，如果描述太长，我只是想提供尽可能多的信息。
最近我遇到了一个问题(我修复了它，但我不明白为什么会这样)。
问题是当您调整浏览器大小时，例如宽度为 768px，媒体查询不起作用。为了工作，我不得不将浏览器宽度减少大约 20-30 像素。

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

<div id="wrapper">
    <header id="header">
        <a href="" class="logo">
        <img src="images/logo-wide.png" alt="logo" />
        </a>
        <a id="menu_button" href="#">menu</a>
        <nav id="nav">
            <ul id="menu">
                <li><a href="" class="home">Home</a></li>
                <li><a href="" class="services">Services</a>
                ... more navidation list items
            </ul>
        </nav>
    </header>
    ... more code which is not relevant
</div>

CSS:

@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();
        }
    ...

有效的代码(我使用 modernizr)

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

有人能告诉我为什么媒体查询在大约 20-30 像素的间隙中不起作用吗？

Answer 1

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

https://developer.mozilla.org/en-US/docs/DOM/element.clientWidth

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

https://developer.mozilla.org/en/docs/CSS/Media_queries#width

这就是您与众不同的地方。

您可以改用 window.innerWidth；它包括滚动条宽度。

https://developer.mozilla.org/en-US/docs/DOM/window.innerWidth

有关处理所有浏览器怪癖的令人难以置信的彻底解决方案，请参阅 https://github.com/tysonmatanich/viewportSize