Responsive design, differences between media query width and actual width

Question

sorry if the description is too long, I'm just trying to give as much info as possible.
Recently i had an issue (i fixed it, but i dont understand why it was happening).
The problem was that when you resize the browser, for example for width 768px, the media query wasn't working. And i had to decrease the browser width for around 20-30px more, in order to work.

Shortly, the 768px media query was working when the width was less than 750px for example. Here is simplified code.
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;
    }
    ...
}

code that wasnt working:

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

code that is working (i use modernizr)

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

Can someone tell me why there was around 20-30px gap in which the media query wasnt working?

Answer 1

.clientWidth returns the inner width of the element i.e it does not include border, margin or vertical scrollbar widths

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

The [min|max]-width media feature in your media query returns the width of the rendering surface or window

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

That's where you get the difference.

You could use window.innerWidth instead; it includes scrollbar width.

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

For an incredibly thorough solution that handles all browser quirks, see https://github.com/tysonmatanich/viewportSize