了解用于响应式设计的视口宽度

在阅读了大量关于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

了解用于响应式设计的视口宽度

回答

相关问题