浅谈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 相关文章推荐
ajax 缓存 问题 requestheader
Aug 01 Javascript
jQuery中用dom操作替代正则表达式
Dec 29 Javascript
jQuery实现跟随鼠标运动图层效果的方法
Feb 02 Javascript
JavaScript实现点击按钮直接打印
Jan 06 Javascript
JavaScript中日期函数的相关操作知识
Aug 03 Javascript
JavaScript中apply方法的应用技巧小结
Sep 29 Javascript
微信端开发--登录小程序步骤
Jan 11 Javascript
浅谈angular.js跨域post解决方案
Aug 30 Javascript
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
JavaScript使用canvas绘制随机验证码
Feb 17 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
原生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 字符串编码截取函数(兼容utf-8和gb2312)
2009/05/02 PHP
php iconv() : Detected an illegal character in input string
2010/12/05 PHP
PHP版QQ互联OAuth示例代码分享
2015/07/05 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
JS获取scrollHeight问题想到的标准问题
2007/05/27 Javascript
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
2010/05/13 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
2014/05/05 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
2014/11/24 Javascript
jQuery实现数秒后自动提交form的方法
2015/03/05 Javascript
JavaScript中的对象与JSON
2015/07/03 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
2015/08/31 Javascript
整理Javascript数组学习笔记
2015/11/29 Javascript
AngularJS内建服务$location及其功能详解
2016/07/01 Javascript
详解Angular的数据显示优化处理
2016/12/26 Javascript
div实现自适应高度的textarea实现angular双向绑定
2017/01/08 Javascript
Ionic2开发环境搭建教程
2020/08/20 Javascript
Three.js利用顶点绘制立方体的方法详解
2017/09/27 Javascript
基于jQuery Ajax实现下拉框无刷新联动
2017/12/06 jQuery
详解一个基于react+webpack的多页面应用配置
2019/01/21 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
2019/08/23 Javascript
Openlayers3实现车辆轨迹回放功能
2020/09/29 Javascript
python连接字符串的方法小结
2015/07/13 Python
初步剖析C语言编程中的结构体
2016/01/16 Python
全面了解Python的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
通过PHP与Python代码对比的语法差异详解
2019/07/10 Python
python中append实例用法总结
2019/07/30 Python
Django后端发送小程序微信模板消息示例(服务通知)
2019/12/17 Python
Python使用gluon/mxnet模块实现的mnist手写数字识别功能完整示例
2019/12/18 Python
jenkins+python自动化测试持续集成教程
2020/05/12 Python
python小技巧——将变量保存在本地及读取
2020/11/13 Python
全网最细 Python 格式化输出用法讲解(推荐)
2021/01/18 Python
HTML5 实现一个访问本地文件的实例
2012/12/13 HTML / CSS
三问三解心得体会
2014/09/05 职场文书
党的群众路线教育实践活动总结大会主持词
2014/10/30 职场文书
幼儿园教师师德表现自我评价
2015/03/05 职场文书
Mysql中有关Datetime和Timestamp的使用总结
2021/12/06 MySQL