반응 형 디자인, 미디어 쿼리 너비와 실제 너비의 차이

Question

설명이 너무 길어서 죄송합니다. 최대한 많은 정보를 제공하려고합니다.
최근 문제가 생겼습니다 (문제가 해결되었지만 이해가 안됩니다).
브라우저의 크기를 조정할 때 (예 : 너비 768 픽셀) 미디어 쿼리가 작동하지 않는 것이 문제였습니다. 그리고 나는 브라우저의 너비를 약 20 ~ 30px 더 줄여야했다.

예를 들어 폭이 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 : (내가 모더 나이저를 사용)

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

하고있다

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

코드 : 작업 않네

@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-30 픽셀 간격이 있었던 이유를 말해 줄 수 있습니까?

Answer 1

.clientWidth은 테두리, 여백 또는 세로 스크롤 막대를 포함하지 않는, 즉 요소의 내부 폭을 반환

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

는 [분 | 최대] 너비 미디어 쿼리 -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