好资源导航 » 文章资讯 » 浅谈JavaScript的innerWidth与innerHeight

浅谈JavaScript的innerWidth与innerHeight

2023-09-23 10:07:05 67

innerWidth与innerHeight属性

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

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

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

varwidth=window.innerWidth,height=window.innerHeight;//分别定义width和height接收窗口的高和宽

alert(width);//窗口的宽度1920px

alert(height);//窗口的高度950px

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

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

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

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

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

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





测试innerHeight属性

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

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

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

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

if(typeofwidth!='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);

以上这篇浅谈JavaScript的innerWidth与innerHeight就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

浅谈JavaScript的innerWidth与innerHeight

热门推荐

随机推荐