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 ...
随机推荐
- 在eclipse中搜索 datasource.xml 文件：
- Educational Codeforces Round 93 (Rated for Div. 2)题解
A. Bad Triangle 题目:https://codeforces.com/contest/1398/problem/A 题解:一道计算几何题,只要观察数组的第1,2,n个,判断他们能否构成三 ...
- Oracle数据泵导出使用并行参数,单个表能否真正的并行？
对于Oracle 数据泵expdp,impdp是一种逻辑导出导入迁移数据的一个工具,是服务端的工具,常见于DBA人员使用,用于数据迁移.从A库迁移至B库,或者从A用户迁移至B用户等. 那么有个疑问? ...
- Kubernetes实战指南（三十三）：都0202了，你还在手写k8s的yaml文件？
目录 1. k8s的yaml文件到底有多复杂 2. 基于图形化的方式自动生成yaml 2.1 k8s图形化管理工具Ratel安装 2.2 使用Ratel创建生成yaml文件 2.2.1 基本配置 2. ...
- java十进制二进制互转
1. 十进制转二进制 原理:给定的数循环除以2,直到商为0或者1为止.将每一步除的结果的余数记录下来,然后反过来就得到相应的二进制了. 比如8转二进制,第一次除以2等于4(余数0),第二次除以2等于2 ...
- 3分钟教会你如何发布Qt程序
导读:Qt程序编写好以后该如何发布.本文教你使用Qt自带工具windeployqt来进行操作. 本文字数:500,阅读时长大约:3分钟 (1)编写一个简单的程序 我们先做一个简单的窗口,添加一个图片资 ...
- 团队作业4：第一篇Scrum冲刺博客（歪瑞古德小队）
目录 一.Alpha阶段任务认领 二.明日任务安排 三.项目预期任务量 四.敏捷开发前的感想 五.团队期望 Author:歪瑞古德小队 Project:海岛漂流 集合贴:团队作业4:项目冲刺集合贴(歪 ...
- Robust and Communication-Efficient Federated Learning from Non-IID Data
郑重声明:原文参见标题,如有侵权,请联系作者,将会撤销发布! 以下是对本文关键部分的摘抄翻译,详情请参见原文. arXiv:1903.02891v1 [cs.LG] 7 Mar 2019 Abstra ...
- muduo源码解析7-countdownlatch类
countdownlatch class countdownlatch:noncopyable { }; 作用: countdownlatch和mutex,condition一样,用于线程之间的同步, ...
- 开源搜索引擎排名第一，Elasticsearch是如何做到的？
一.引言 随着移动互联网.物联网.云计算等信息技术蓬勃发展,数据量呈爆炸式增长.如今我们可以轻易得从海量数据里找到想要的信息,离不开搜索引擎技术的帮助. 作为开源搜索引擎领域排名第一的 Elast ...