自適應設計，媒體查詢的寬度和實際寬度之間的差異

抱歉，如果描述太長，我只是想給儘可能多的信息成爲可能。
最近我有一個問題（我解決了它，但我不明白爲什麼會發生）。
的問題是，當你調整瀏覽器，例如用於寬768px，媒體查詢是行不通的。爲了工作，我不得不減少瀏覽器寬度大約20-30px。自適應設計，媒體查詢的寬度和實際寬度之間的差異

不久，768px媒體查詢正在當寬度小於750px例如。 這裏是簡化的代碼。
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：即工作

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

：這wasnt工作

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

代碼有人可以告訴我爲什麼媒體查詢不起作用的時候，爲什麼會有20-30px左右的空白？

來源

2013-04-10 trajce

有多寬是一個滾動條？ – cimmanon 2013-04-10 00:49:56

我沒有修改任何關於滾動條，所以它的默認值，我相信它是在10-15px左右。 – trajce 2013-04-10 00:51:47