응답 디자인을위한 뷰포트 너비 이해

많은 것을 읽은 후에 browser viewport width 문제가 발생했습니다.이 개념을 이해하면 재판을 통해 결론을 내릴 수 있습니다. 이 스크립트 인쇄 "당신의 뷰포트의 폭이 너비 x 높이이다"응답 디자인을위한 뷰포트 너비 이해

는

요소 1 : 1920 × 1080 해상도에서 어떤 스크롤 막대가없는 HP의 x2301 화면 : JS 인쇄 : 귀하의 뷰포트의 폭은 1920x955입니다

나는 아래 자바 스크립트를 사용

요소 2 : 인쇄 JS를 : 귀하의 뷰포트의 폭이 1920x955

Element3 인 1920 × 1080 해상도에서 스크롤 막대와 HP의 x2301 화면 (나는 로렘 입숨 문자열 단락의 많은 페이지의 높이를 증가) : Chrome에서 요소 1보기를 검사했습니다. d 요소 2보기.

이유에서 element1과 element2에 같은 폭을했다 : 스크롤 막대 요소 (2)의 경우, 크롬은 1920

내 질문은하지 1903 픽셀로 폭을 썼다? element2의 경우, 나는 new width = (1920 - scroll bar width)을 기대하고있었습니다. 예를 들어 크롬은 검사 도구에 1903 픽셀을 썼습니다.

내 머리글에 <meta name="viewport" content="initial-scale=1, width=device-width">을 메타 태그로 선언했습니다. 그리고 내 CSS3에서는 @media screen and (max-width: 1000px) { change something for responsiveness }이라고 선언했습니다. 이 브라우저의 뷰포트에서 반응하기 때문에이 두 가지 조합은 정상입니까? 이 시점에서 필자는 뷰포트 정의와 목표가 수직 스크롤 막대가없는 순수한 디스플레이 너비라는 것을 말해야합니다. 나의 이해의, max-width:1000px이 내게주는 의미 때문에 :

<script type="text/javascript"> 
    <!-- 
      
     var viewportwidth; 
     var viewportheight; 
       
     // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight 
       
     if (typeof window.innerWidth != 'undefined') 
     { 
          viewportwidth = window.innerWidth, 
          viewportheight = window.innerHeight 
     } 
       
    // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document) 
      
     else if (typeof document.documentElement != 'undefined' 
         && typeof document.documentElement.clientWidth != 
         'undefined' && document.documentElement.clientWidth != 0) 
     { 
           viewportwidth = document.documentElement.clientWidth, 
           viewportheight = document.documentElement.clientHeight 
     } 
       
     // older versions of IE 
       
     else 
     { 
           viewportwidth = document.getElementsByTagName('body')[0].clientWidth, 
           viewportheight = document.getElementsByTagName('body')[0].clientHeight 
     } 
    document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>'); 
    //--> 
    </script>

http://andylangton.co.uk/blog/development/get-viewport-size-width-and-height-javascript 사전에 감사합니다,

에 관하여 : 순수한 디스플레이 폭 후 레이아웃에 반응 할 것은 소스 링크가 자바 스크립트 < = 1000px

입니다

출처

2014-01-23 Andre Chenier

나는 그 점을 얻었다.

JS를 변경하고 실제 뷰포트 너비를 얻었습니다.

JS 소유자는 SO 제품군의 Vilmantas Baranauskas입니다.

관련 스크립트 : 내가 아는 스크롤 바의 표준 폭 17px 때문에

<script type="text/javascript">  
     var viewportHeight; 
     var viewportWidth; 
     if (document.compatMode === 'BackCompat') { 
      viewportHeight = document.body.clientHeight; 
      viewportWidth = document.body.clientWidth; 
     } else { 
      viewportHeight = document.documentElement.clientHeight; 
      viewportWidth = document.documentElement.clientWidth; 
     } 
     document.write('<p>Your viewport width without scrollbars is '+viewportHeight+'x'+viewportWidth+'</p>'); 
    </script>

1903 픽셀 너비는 사실이다.

빈 초안 웹 페이지의 경우에도 스크롤바를 항상 브라우저에 표시하려면 CSS Body 또는 HTML 태그에 overflow-y:scroll; 코드를 사용하는 것이 좋습니다.

출처

2014-01-23 09:25:31

응답 디자인을위한 뷰포트 너비 이해

답변

관련 문제