关于JavaScript的innerWidth与innerHeight

2018-06-24 00:28:06来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

innerWidth与innerHeight属性
说明:window对象的只读属性,声明了窗口的文档显示区的高度和宽度,以像素(px)为计量单位。 (注意:这里的宽度和高度不包括菜单栏、工具栏以及滚动条等的高度)

下面便对这两个属性进行验证:

屏幕分辨率为:1920x1080     浏览器:QQ浏览器(内核是Chrome)  代码如下:

 var width=window.innerWidth,height=window.innerHeight;         //分别定义width和height接收窗口的高和宽
     alert(width);        //窗口的宽度 1920px
     alert(height);     //窗口的高度  950px

innerWidth因为浏览器两旁没有遮挡物,所以完美的得到了屏幕的宽度1920,而innerHeight因为浏览器上面有工具栏,显示屏又有任务栏,所以被挤掉了130px

这次博主依次干掉了任务栏(其实就是隐藏了)和工具栏中的标签页 并按下F12加上了开发者选项 再次进行测试:

     /*————————干掉任务栏后————————*/
     var width=window.innerWidth,height=window.innerHeight;        
     alert(width);        //宽度没有变化,还是1920px
     alert(height);     //而窗口的高度990px,表明任务栏占40px(任务栏的默认高度) 导致没有获取到全部高度

     /*————————又干掉标签页后,并加上开发者选项后————————*/
     var width=window.innerWidth,height=window.innerHeight;
     alert(width);        //1381px,说明浏览器开发者选项,对innerWidth有影响 1920-1381=549px 
     alert(height);     //而窗口的高度979px,任务栏占40px,标签页占了11px(990-979) 而由此得出剩下的工具栏占了1080-979=101px

结论:说明innerHeight和innerWidth确实只计算显示窗口像素,如果没有菜单栏、工具栏等外部因素挤压它,它就会自动延伸,而如果有就只按显示窗体走

测试完外部的因素,下面测试一下内部的因素滚动条

  <html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                
        <title>测试innerHeight属性</title>
            
        </head>
        
        <body>
        <div style="width:500px;height:1300px;background-color:red;"></div>
        
        <script>        
                window.onload=function(){
                    /*————————div超出长度,带着滚动条后————————*/
                    var width=window.innerWidth,height=window.innerHeight;        
                     alert(width);        //窗口的宽度 1920px
                     alert(height);     //窗口的高度  950px
            }
            </script>
        </body>
   </html>

结论:说明内部的滚动条对innerWidth并没有影响,即使存在对width也没有影响,依旧是1920px

最终结论:innerHeight和innerWidth获取的是窗体的高与宽,外部因素如(浏览器开发者选项,收藏夹)会对它有影响,而内部因素(滚动条)则对其没有影响

 

下面说一下槽点最多的IE,关于IE兼容性的问题,可以这样解决

//兼容代码可以这样子写
var width = window.innerWidth,height = window.innerHeight;

if (typeof width != 'number') {       //如果类型不为number,表示该浏览器不支持innerWidth属性

    if (document.compatMode == 'CSS1Compat') {          //CSS1Compat:判断是否为标准兼容模式。

        width = document.documentElement.clientWidth;

        height = document.docuementElement.clientHeight;

    } else {  //不是标准模式,则有可能是IE6或及其以下版本(早期的浏览器对css进行解析时,并未遵守W3C标准)

        width = document.body.clientWidth;            //网页可见区域宽

        height = document.body.clientHeight;          //网页可见区域高
}
        alert(width);
        alert(height);

 

文章大概结束了(第一次发文,有理解不对的地方还望大神指教)

 

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:npm install 无响应解决方案 -verbose显示安装的详细信息

下一篇:node.js的一个小例子