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

时间:2014-01-23 07:47:45

标签: html5 css3 responsive-design viewport

在阅读了很多关于browser viewport width问题的文章之后,我总结了一个试验,看看我是否理解了这个概念。

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

元素1:分辨率为1920 x 1080,HP x2301屏幕没有任何滚动条: JS打印:您的视口宽度为1920x955

元素2:分辨率为1920 x 1080,带滚动条的HP x2301屏幕(我增加了页面的高度,有很多lorem Ipsum字符串段落): JS打印:您的视口宽度为1920x955

元素3:在Chrome中,我检查了element1视图和element2视图。对于元素2,使用滚动条,Chrome将宽度写为1903像素,而不是1920.

我的问题是:

  1. 为什么element1和element2的宽度相同?对于element2,我期待new width = (1920 - scroll bar width)。例如,Chrome在其检测工具中写入了1903像素。
  2. 我在标题中将<meta name="viewport" content="initial-scale=1, width=device-width">声明为元标记。在我的CSS3中,我宣布@media screen and (max-width: 1000px) { change something for responsiveness }由于我的目标是在浏览器的视口中响应,这两个组合是否正常?此时我应该说我的视口定义和目标是没有垂直滚动条的纯显示宽度。由于我的理解,max-width:1000px对我来说意味着:在纯显示宽度为&lt; = 1000px
  3. 后立即响应布局

    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>
    

    提前谢谢,问候

1 个答案:

答案 0 :(得分:0)

我明白了。

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

JS老板是来自SO家族的Vilmantas Baranauskas。

相关的SO链接:Get the height and width of the browser viewport without scrollbars using jquery?

相关脚本:

    <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 overflow-y:scroll;Body代码中的HTML代码,以便浏览器始终显示滚动条,即使是空白草稿网页也是如此。< / p>