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中关于获取浏览器可视窗口的几个兼容性写法的理解的更多相关文章

  1. jq获取浏览器可视窗口的高度

    <script> var window_height = $(window).height(); </script>

  2. JQuery 获取元素到浏览器可视窗口边缘的距离

    获取元素到浏览器可视窗口边缘的距离 by:授客 QQ:1033553122 1.   测试环境 JQuery-3.2.1.min.js 下载地址: https://gitee.com/ishouke/ ...

  3. Javascript、Jquery获取浏览器和屏幕各种高度宽度（单位都为px）

    Javascript.Jquery获取浏览器和屏幕各种高度宽度 另外参见    http://www.cnblogs.com/top5/archive/2009/05/07/1452135.html ...

  4. javascript中如何获取对象名

    javascript中如何获取对象名 一.总结 一句话总结:将对象传入参数,看参数是否为函数(js中的对象和函数是一个意思么(函数肯定是对象)),对象参数.name属性即可获得 //版本4 funct ...

  5. 判断指定对象是否进入浏览器可视窗口，true 进入，false 没进入

    //判断指定对象是否进入浏览器可视窗口,true 进入,false 没进入 var $win = $(window);//jQuery 的 window 对象 即:文档对象 function isVi ...

  6. js基础--获取浏览器当前页面的滚动条高度的兼容写法

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 在开发中,兼容性问题是最常见的,今天就来介绍一下关于获取滚动条高度的兼容性写法,宽度同理,我在这里就不一一解释了 各浏览器 ...

  7. Javascript和JQuery获取浏览器窗口各种尺寸

    原生JS 窗口尺寸: console.log('window.innerWidth = ' + window.innerWidth + '---window.innerHeight = ' + win ...

  8. Javascript、Jquery获取浏览器和屏幕各种高度宽度

    Javascript: IE中:document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度d ...

  9. JS获取浏览器可视区域尺寸

    本文所说的是浏览器窗口的可视区域大小,不是浏览器窗口大小,也非页面尺寸. 在没有声明DOCTYPE的IE中,浏览器显示窗口大小只能以下获取: document.body.offsetWidth doc ...

随机推荐

  1. 浏览器自动化的一些体会7 selenium webdriver的一些问题

    1. 下载图片 这个链接说得最好,差不多所有可能的方法都列举了,除了没有提到用URLDownloadToFile,不过这和用WebClient差不多. https://stackoverflow.co ...

  2. DDD与Repository

    Repository已经不是什么新鲜概念了.DDD模型自2004年提出,发展至今已经16年了.但是不少企业却无法实施,其原因也很简单:DDD是基于需求的,而很多并不理解需求:DDD是容易实现的,而很多 ...

  3. go thrift demo

    接口:https://gowalker.org/github.com/apache/thrift/lib/go/thrift 参考文件:https://cong.im/2018/05/14/other ...

  4. 存储池与存储卷，使用virt-install创建虚拟机

    原文链接:https://www.cnblogs.com/zknublx/p/9199658.html 创建存储池 1.建立存储池的目录 mkdir /kvm/images 2.为了安全性,更改目录的 ...

  5. SPSSAU数据分析思维培养系列3：分析思路篇

    本文章为SPSSAU数据分析思维培养的第3期文章. 上文讲解如何选择正确的分析方法,除了有正确的分析方法外,还需要把分析方法进行灵活运用.拿到一份数据,应该如何进行分析,总共有几个步骤,第一步第二步应 ...

  6. Spring是如何解决循环依赖的

    前言 在面试的时候这两年有一个非常高频的关于spring的问题,那就是spring是如何解决循环依赖的.这个问题听着就是轻描淡写的一句话,其实考察的内容还是非常多的,主要还是考察的应聘者有没有研究过s ...

  7. 夜息seo培训内部教程

    http://www.wocaoseo.com/thread-268-1-1.html 随着SEO日益正规化,在企业中推行SEO变得越来越重要,在上一文<将SEO整合入整个网站项目>中也有 ...

  8. seo排名顾问不仅仅是关键词排名

    http://www.wocaoseo.com/thread-246-1-1.html SEO顾问是什么,应该做什么工作呢,是不是主要做关键词的优化推广呢?做seo顾问入门的人,或者想聘请seo顾问的 ...

  9. synchronized的实现原理——对象头解密

    前言 并发编程式Java基础,同时也是Java最难的一部分,因为与底层操作系统和硬件息息相关,并且程序难以调试.本系列就从synchronized原理开始,逐步深入,领会并发编程之美. 正文 基础稍微 ...

  10. Unity坐标系详解

    1. World Space(世界坐标系): 我们在场景中添加的物体(如:Cube),他们都是以世界坐标显示在场景中.transform.position 获取的便是这个 坐标数值. 2. Scene ...