浅谈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 相关文章推荐
javascript 实现父窗口引用弹出窗口的值的脚本
Aug 07 Javascript
js获取当前页面路径示例讲解
Jan 08 Javascript
jQuery中的ajax async同步和异步详解
Sep 29 Javascript
详解基于Bootstrap扁平化的后台框架Ace
Nov 27 Javascript
javascript基本数据类型及类型检测常用方法小结
Dec 14 Javascript
vue.js评论发布信息可插入QQ表情功能
Aug 08 Javascript
Bootstrap 中data-[*] 属性的整理
Mar 13 Javascript
JS获取并处理php数组的方法实例分析
Sep 04 Javascript
vue--vuex详解
Apr 15 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
Jul 27 Javascript
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
vue实现Toast组件轻提示
Apr 10 Vue.js
原生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!数据库
2008/05/03 PHP
PHP中mysql_field_type()函数用法
2014/11/24 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
PHP getName()函数讲解
2019/02/03 PHP
Thinkphp框架+Layui实现图片/文件上传功能分析
2020/02/07 PHP
jquery checkbox,radio是否选中的判断代码
2010/03/20 Javascript
jQuery在vs2008及js文件中的无智能提示的解决方法
2010/12/30 Javascript
40款非常棒的jQuery 插件和制作教程(系列二)
2011/11/02 Javascript
js遍历子节点子元素附属性及方法
2014/08/19 Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
2016/05/16 Javascript
Vue.js每天必学之方法与事件处理器
2016/09/06 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
2016/09/09 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
2016/12/23 Javascript
js仿微博动态栏功能
2017/02/22 Javascript
JavaScript实现无刷新上传预览图片功能
2017/08/02 Javascript
Ionic3实现图片瀑布流布局
2017/08/09 Javascript
Node.js学习教程之HTTP/2服务器推送【译】
2017/10/31 Javascript
jQuery实现表单动态加减、ajax表单提交功能
2018/06/08 jQuery
Vue.js实现可排序的表格组件功能示例
2019/02/19 Javascript
javascript实现的字符串转换成数组操作示例
2019/06/13 Javascript
layui的面包屑或者表单不显示的解决方法
2019/09/05 Javascript
微信小程序动态添加和删除组件的现实
2020/02/28 Javascript
使用Python读写文本文件及编写简单的文本编辑器
2016/03/11 Python
Python用模块pytz来转换时区
2016/08/19 Python
Django 批量插入数据的实现方法
2020/01/12 Python
Python如何用wx模块创建文本编辑器
2020/06/07 Python
使用sklearn对多分类的每个类别进行指标评价操作
2020/06/11 Python
Python jieba结巴分词原理及用法解析
2020/11/05 Python
利用CSS3实现文字折纸效果实例代码
2018/07/10 HTML / CSS
html5给汉字加拼音加进度条的实现代码
2020/04/07 HTML / CSS
印度排名第一的蛋糕、鲜花和礼品送货:Winni
2019/08/02 全球购物
国际花店:Pickup Flowers
2020/04/10 全球购物
杭州龙健科技笔试题.net部分笔试题
2016/01/24 面试题
大学活动策划书范文
2014/01/10 职场文书
大学生个人求职口试自我评价
2014/02/16 职场文书
关于梦想的演讲稿
2014/05/05 职场文书