了解响应式设计的视口宽度答案

【问题标题】：understanding viewport width for responsive design了解响应式设计的视口宽度
【发布时间】：2014-02-13 15:40:00
【问题描述】：

在阅读了很多关于browser viewport width的问题后，我决定尝试一下，看看我是否理解这个概念。

我在下面使用了 javascript：此脚本打印“您的视口宽度为 WidthxHeight”

元素 1：在 1920 x 1080 分辨率下，HP x2301 屏幕没有任何滚动条： JS 打印：你的视口宽度是 1920x955

元素 2：在 1920 x 1080 分辨率下，带有滚动条的 HP x2301 屏幕（我用大量 lorem Ipsum 字符串段落增加了页面高度）： JS 打印：你的视口宽度是 1920x955

Element3：在 Chrome 中，我检查了 element1 视图和 element2 视图。对于带有滚动条的元素 2，Chrome 将宽度写为 1903 像素，而不是 1920。

我的问题是：

为什么 element1 和 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 对我来说意味着：在纯显示宽度为之后布局响应

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>

提前谢谢你，问候

【问题讨论】：

标签： html css responsive-design viewport

【解决方案1】：

我明白了。

我更改了 JS 并获得了真正的视口宽度。

JS 所有者是来自 SO 家族的 Vilmantas Baranauskas。

相关脚本：

    <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 像素宽度为真，因为据我所知，滚动条标准宽度为 17px。

我还建议任何人在 CSS Body 或 HTML 标签中使用 overflow-y:scroll; 代码，以使浏览器始终显示滚动条，即使对于空白的草稿网页也是如此。

【讨论】：