浅谈JavaScript的innerWidth与innerHeight


Posted in Javascript onOctober 12, 2017

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);

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

Javascript 相关文章推荐
获取内联和链接中的样式(js代码)
Apr 11 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
May 07 Javascript
JQuery性能优化的几点建议
May 14 Javascript
使用JS+plupload直接批量上传图片到又拍云
Dec 01 Javascript
JavaScript中instanceof运算符的使用示例
Jun 08 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
Nov 02 Javascript
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
Dec 13 Javascript
Bootstrap导航简单实现代码
Mar 06 Javascript
妙用Angularjs实现表格按指定列排序
Jun 23 Javascript
javascript 日期相减-在线教程(附代码)
Aug 17 Javascript
vuex实现的简单购物车功能示例
Feb 13 Javascript
解决vue打包 npm run build-test突然不动了的问题
Nov 13 Javascript
原生JS封装animate运动框架的实例
Oct 12 #Javascript
javascript中神奇的 Date对象小结
Oct 12 #Javascript
详解使用路由延迟加载 Angular 模块
Oct 12 #Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
Oct 11 #Javascript
js实现单张图片平移切换效果
Oct 11 #Javascript
jQuery自动或手动图片切换效果
Oct 11 #jQuery
简单实现vue验证码60秒倒计时功能
Oct 11 #Javascript
You might like
比较discuz和ecshop的截取字符串函数php版
2012/09/03 PHP
php文件上传的例子及参数详解
2013/12/12 PHP
ThinkPHP模版引擎之变量输出详解
2014/12/05 PHP
discuz图片顺序混乱解决方案
2015/07/29 PHP
Thinkphp 3.2框架使用Redis的方法详解
2019/10/24 PHP
在JavaScript并非所有的一切都是对象
2013/04/11 Javascript
js jq 单击和双击区分示例介绍
2013/11/05 Javascript
事件委托与阻止冒泡阻止其父元素事件触发
2014/09/02 Javascript
推荐6款基于jQuery实现图片效果插件
2014/12/07 Javascript
jQuery中click事件的定义和用法
2014/12/20 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
2016/09/19 Javascript
JavaScript中常用的验证reg
2016/10/13 Javascript
简单实现vue验证码60秒倒计时功能
2017/10/11 Javascript
利用JS测试目标网站的打开响应速度
2017/12/01 Javascript
react以create-react-app为基础创建项目
2018/03/14 Javascript
前端axios下载excel文件(二进制)的处理方法
2018/07/31 Javascript
vue 组件的封装之基于axios的ajax请求方法
2018/08/11 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
2020/02/07 Javascript
python3操作mysql数据库的方法
2017/06/23 Python
Python图像处理之直线和曲线的拟合与绘制【curve_fit()应用】
2018/12/26 Python
Python3实现统计单词表中每个字母出现频率的方法示例
2019/01/28 Python
Python将文字转成语音并读出来的实例详解
2019/07/15 Python
Python django搭建layui提交表单,表格,图标的实例
2019/11/18 Python
解决pycharm同一目录下无法import其他文件
2020/02/12 Python
python数据预处理 :数据共线性处理详解
2020/02/24 Python
python调用jenkinsAPI构建jenkins,并传递参数的示例
2020/12/09 Python
pycharm 多行批量缩进和反向缩进快捷键介绍
2021/01/15 Python
同程旅游英文网站:LY.com
2018/11/13 全球购物
Anthropologie英国:美国家喻户晓的休闲服装和家居产品品牌
2018/12/05 全球购物
机电专业求职信
2014/06/14 职场文书
群众路线党员个人整改措施
2014/10/27 职场文书
2014年网管工作总结
2014/12/11 职场文书
少先队工作总结2015
2015/05/13 职场文书
闭幕词的写作格式与范文!
2019/06/24 职场文书
Python爬虫网络请求之代理服务器和动态Cookies
2022/04/12 Python
Redis实战高并发之扣减库存项目
2022/04/14 Redis