瞭解用於響應式設計的視口寬度

在閱讀了大量關於browser viewport width的問題後，我總結出了一個試驗，看看是否理解了這個概念。瞭解用於響應式設計的視口寬度

我用下面的javascript：此腳本輸出「你的視口寬度爲：寬x」

元素1：在1920×1080的分辨率，而沒有任何滾動條HP x2301屏幕： JS印刷：您的視口寬度爲1920x955

要素2：在1920×1080的分辨率，HP x2301屏幕滾動條（我增加頁面的高度，有很多Lorem存有串段）： JS印：你的視口寬度爲1920x955

元素3 ：在Chrome上，我檢查了element1的視圖d元素2視圖。對於元件2，帶滾動條，鍍鉻寫道寬度爲1903像素，而不是1920年。

我的問題是：

爲什麼部件1和element2的作出了同樣的寬度是多少？對於element2，我期待new width = (1920 - scroll bar width)。例如，Chrome在其檢測工具中寫入了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我來說意味着：只是單純的顯示寬度後，迴應和佈局< = 1000像素

JavaScript源鏈接是：http://andylangton.co.uk/blog/development/get-viewport-size-width-and-height-javascript

<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>

預先感謝您，對於

來源

2014-01-23 Andre Chenier

我明白了。

我改變了JS並獲得了真正的視口寬度。

JS老闆是SO家族的Vilmantas Baranauskas。

相關的腳本：因爲我知道滾動條STD寬度知識+

<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像素寬度是真實的。

我也推薦給任何一個使用overflow-y:scroll;代碼中CSS Body或HTML標籤，以使瀏覽器始終顯示滾動條即使空白草稿網頁。

來源

2014-01-23 09:25:31

瞭解用於響應式設計的視口寬度

回答

相關問題