浅谈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
Nov 25 Javascript
JavaScript 参考教程
Dec 29 Javascript
jquery刷新页面的实现代码(局部及全页面刷新)
Jul 11 Javascript
javascript arguments使用示例
Dec 16 Javascript
JS通过ajax动态读取xml文件内容的方法
Mar 24 Javascript
javascript实现简单的进度条
Jul 02 Javascript
详解javascript遍历方式
Nov 11 Javascript
Vue.JS入门教程之事件监听
Dec 01 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
Dec 20 Javascript
Vue+element-ui 实现表格的分页功能示例
Aug 18 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
Apr 23 Javascript
使用localStorage替代cookie做本地存储
Sep 25 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
php下获取Discuz论坛登录用户名、用户组、用户ID等信息的实现代码
2010/12/29 PHP
div li的多行多列 无刷新分页示例代码
2013/10/16 PHP
thinkphp数据查询和遍历数组实例
2014/11/28 PHP
PHP中使用Imagick读取pdf并生成png缩略图实例
2015/01/21 PHP
基于linnux+phantomjs实现生成图片格式的网页快照
2015/04/15 PHP
在WordPress中使用PHP脚本来判断访客来自什么国家
2015/12/10 PHP
详解WordPress中分类函数wp_list_categories的使用
2016/01/04 PHP
实例讲解PHP设计模式编程中的简单工厂模式
2016/02/29 PHP
PHP实现的方程求解示例分析
2016/11/11 PHP
PHP Mysqli 常用代码集合
2016/11/12 PHP
初学js插入节点appendChild insertBefore使用方法
2011/07/04 Javascript
javascript 得到文件后缀名的思路及实现
2020/05/09 Javascript
js的for in循环和java里foreach循环的区别分析
2015/01/28 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
2016/03/07 Javascript
javascript html5摇一摇功能的实现
2016/04/19 Javascript
使用JQuery中的trim()方法去掉前后空格
2016/09/16 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
2017/09/20 Javascript
JS尾递归的实现方法及代码优化技巧
2019/01/19 Javascript
Nodejs实现的操作MongoDB数据库功能完整示例
2019/02/02 NodeJs
Vue 2.0双向绑定原理的实现方法
2019/10/23 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
2019/11/06 Javascript
Python3基础之条件与循环控制实例解析
2014/08/13 Python
Python3实现的爬虫爬取数据并存入mysql数据库操作示例
2018/06/06 Python
python对日志进行处理的实例代码
2018/10/06 Python
Python3中在Anaconda环境下安装basemap包
2018/10/21 Python
pandas 把数据写入txt文件每行固定写入一定数量的值方法
2018/12/28 Python
Python 异常的捕获、异常的传递与主动抛出异常操作示例
2019/09/23 Python
python ImageDraw类实现几何图形的绘制与文字的绘制
2020/02/26 Python
CK巴西官方网站:Calvin Klein巴西
2019/07/19 全球购物
工作表扬信的范文
2014/01/10 职场文书
乡镇三项教育实施方案
2014/03/30 职场文书
党的群众路线个人对照检查材料
2014/09/23 职场文书
个人年终总结怎么写
2015/03/09 职场文书
公司禁烟通知
2015/04/23 职场文书
2015年七一建党节活动方案
2015/05/05 职场文书
上诉答辩状范文
2015/05/22 职场文书