JavaScript中关于获取浏览器可视窗口的几个兼容性写法的理解
1.浏览器可视窗口的概述：
浏览器可视区域不是网页的body的大小。可视区指的是浏览器减去上面菜单栏、工具栏，下面状态栏和任务栏，右边滚动条（如果有的话）后的中间网页内容的单页面积大小。而body大小是随着内容调整而变动的，可大可小。如果有滚动条的话，body的要大于可视区
2.不同浏览器或版本的不同写法：
对于IE9+、Chrome、Firefox、Opera 以及 Safari(window对象属性不支持IE8及以下浏览器):
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
对于 Internet Explorer 8、7、6、5：
document.documentElement.clientHeight 表示HTML文档所在窗口的当前高度（浏览器窗口的内部高度）
document.documentElement.clientWidth 表示HTML文档所在窗口的当前宽度（浏览器窗口的内部宽度）
或者 Document对象的body属性对应HTML文档的<body>标签
document.body.clientHeight （body标签的内部高度）
document.body.clientWidth （body标签的内部宽度）
综上所述，在不同浏览器都实用的兼容性JavaScript 方案如下：
var w= window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h= window.innerHeight || document.documentElement.clientHeight|| document.body.clientHeight;
3. 关于兼容性的后两者的理解：
3.1 两者对象不同（前者是浏览器对象，后者是body对象），其结果也不绝对相同
3.2 在浏览器默认的情况下，body有8-10px左右的边距，而可见区域包括了这个边距，因此如果我们用到body{padding:0;margin:0;}来消除这种默认的情况。那么document.body.clientWidth和document.documentElement.clientWidth 的值就会相同。
获取更多前端知识，请关注下方二维码 ↓↓↓↓↓↓
JavaScript中关于获取浏览器可视窗口的几个兼容性写法的理解的更多相关文章
- jq获取浏览器可视窗口的高度
<script> var window_height = $(window).height(); </script>
- JQuery 获取元素到浏览器可视窗口边缘的距离
获取元素到浏览器可视窗口边缘的距离 by:授客 QQ:1033553122 1. 测试环境 JQuery-3.2.1.min.js 下载地址: https://gitee.com/ishouke/ ...
- Javascript、Jquery获取浏览器和屏幕各种高度宽度（单位都为px）
Javascript.Jquery获取浏览器和屏幕各种高度宽度 另外参见 http://www.cnblogs.com/top5/archive/2009/05/07/1452135.html ...
- javascript中如何获取对象名
javascript中如何获取对象名 一.总结 一句话总结:将对象传入参数,看参数是否为函数(js中的对象和函数是一个意思么(函数肯定是对象)),对象参数.name属性即可获得 //版本4 funct ...
- 判断指定对象是否进入浏览器可视窗口，true 进入，false 没进入
//判断指定对象是否进入浏览器可视窗口,true 进入,false 没进入 var $win = $(window);//jQuery 的 window 对象 即:文档对象 function isVi ...
- js基础--获取浏览器当前页面的滚动条高度的兼容写法
欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 在开发中,兼容性问题是最常见的,今天就来介绍一下关于获取滚动条高度的兼容性写法,宽度同理,我在这里就不一一解释了 各浏览器 ...
- Javascript和JQuery获取浏览器窗口各种尺寸
原生JS 窗口尺寸: console.log('window.innerWidth = ' + window.innerWidth + '---window.innerHeight = ' + win ...
- Javascript、Jquery获取浏览器和屏幕各种高度宽度
Javascript: IE中:document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度d ...
- JS获取浏览器可视区域尺寸
本文所说的是浏览器窗口的可视区域大小,不是浏览器窗口大小,也非页面尺寸. 在没有声明DOCTYPE的IE中,浏览器显示窗口大小只能以下获取: document.body.offsetWidth doc ...
随机推荐
- Vue3 + Element ui 后台管理系统
Vue3 + Element ui 后台管理系统 概述:这是一个用vue3.0和element搭建的后台管理系统界面. 项目git地址: https://github.com/whiskyma/vu ...
- 火题大战Vol.0 B 计数DP
火题大战Vol.0 B 题目描述 \(n\) 个沙茶,被编号 \(1\)~$ n$.排完队之后,每个沙茶希望,自己的相邻的两人只要无一个人的编号和自己的编号相差为 \(1\)(\(+1\) 或\(-1 ...
- three.js 制作逻辑转体游戏（下）
上一篇已经对绕非定轴转动有所了解,这篇郭先生继续说一说逻辑转体游戏的制作,这部分我们同样会遇到一些小问题,首先是根据数据渲染陷阱和目标区域,然后是对可以转动的判定,最后是获胜的判定. 1. 根据数据渲 ...
- Jmeter 常用函数（25）- 详解 __V
如果你想查看更多 Jmeter 常用函数可以在这篇文章找找哦 https://www.cnblogs.com/poloyy/p/13291704.html 作用 执行变量名表达式,并返回执行结果 它可 ...
- linux 修改 mac
ifconfig eth0 hw ether fa::3d:c3:: 或 ip link set dev eth0 address fa::3d:c3::
- 使用C#对华为IPC摄像头二次开发（一）
开发环境: 操作系统:Win10 x64专业版2004 开发工具:VS2019 16.7.2 目标平台:x86 首先去下载IPC SDK(点击下载,需要华为授权账户.) 新建一个WPF的项目,Fram ...
- 模拟退火详解&P1433题解
前排提示:LZ是个菜比,有可能有讲的不对的地方,请在评论区指出qwq 0.基本思想 模拟退火其实没有那么高大上.说白了就是初始化一个"温度".每次随机乱选一个方案,如果比以前的方案 ...
- 外链专员怎么做提升自己的seo水平
http://www.wocaoseo.com/thread-281-1-1.html 我是一个外链专员,想提升自身的seo水平该怎么做? 随着SEO的学习,已经有了一段时间,平时也在思考好多事情,现 ...
- 做SEO必须制定超越竞争对手网站的方案
http://www.wocaoseo.com/thread-131-1-1.html 从开始终学习SEO技术,到现在半年过去了,其间也做了几个站,可是赚钱的并不多,有流量的也不多,虽然说 ...
- BM算法学习
根据阮一峰大大的文章实现,不过没实现“搜索词中的上一次出现位置”(我直接实时查找,显然应该预处理): 文章:http://www.ruanyifeng.com/blog/2013/05/boyer-m ...