JavaScript世界中，有很多看起来能够帮我们知道网页宽度和高度的API，但太繁多了，而且容易弄混、不容易区分它们。下面我就来介绍一下，这些API到底是什么意思，之间的区别又在哪里。

一、设备的分辨率

window.screen.width × window.screen.height

台式机：1440 × 900 / 手机：360 × 640

二、浏览器的分辨率

window.screen.availWidth × window.screen.availHeight

台式机Chrome：1440 × 860 / 手机：360 × 640

设备和在设备上安装的浏览器只要不更改，它们的分辨率保持不变

在台式机设备中，浏览器分辨率的高度 = 设备分辨率的高度 - 40px；设备分辨率的宽度包含了滚动条宽度

三、窗口视口（能看到的网页区域）的宽高

window.innerWidth × window.innerHeight

台式机Chrome：1440 × 797 / 手机：360 × 518

window.innerWidth在台式机设备中，包含滚动条宽度；window.innerHeight会随菜单和书签栏的隐藏、显示发生改变

IE8不支持这两个属性

可以把这两个属性作为响应式布局的依据（在移动设备上无滚动条）

四、文档视口的宽高

document.documentElement.clientWidth × document.documentElement.clientHeight

台式机Chrome：14401423 × 797 / 手机：360 × 518

与「窗口视口的宽高」侦测API仅一处不同：宽度是去掉滚动条宽度之后的结果；也能知道，台式机浏览器滚动条的宽度是17px

五、文档body的边框区域

document.body.offsetWidth × document.body.offsetHeight

台式机Chrome：1403 × 1214 / 手机：340 × 1214

给大家看一下，在台式机设备中，<body>标签的盒子模型，再看显示结果就很容易理解了

“body的边框区域”不再是指“视口区域”了，它是指<body>标签所占有的网页空间，这里的有效区域是“body的content+padding+border，margin不计算在内”。以台式机设备举例

document.body.offsetWidth  = 1389 + (5 + 2) × 2 = 1403（px）

document.body.offsetHeight = 1200 + (5 + 2) × 2 = 1214（px）

六、文档body的边框内区域

document.body.clientWidth × document.body.clientHeight

台式机Chrome：1399 × 1210 / 手机：336 × 1210

与「文档body的边框区域」侦测API就一处不同：有效区域不包含border，也就是“body的content+padding，border和margin不计算在内”。以台式机设备举例

document.body.clientWidth  = document.body.offsetWidth  - 2 × 2 = 1399 （px）

document.body.clientHeight = document.body.offsetHeight - 2 × 2 = 1210（px）

七、网页的宽高

document.documentElement.scrollWidth × document.documentElement.scrollHeight

// 或者

document.documentElement.offsetWidth × document.documentElement.offsetHeight

台式机Chrome：1399 × 1210 / 手机：336 × 1210

一个网页宽高究竟是多少（不包含滚动条），上面的结果给了你答案。它的有效区域是“body的content+padding+border+margin”，也就是body的完整盒子模型的大小。

八、不要使用document.body.scrollWidth/document.body.scrollHeight

为什么？因为Firefox和Chrome对这一属性的表现不一致！

在Firefox中，指「文档body的边框内区域」；在Chrome中，指「网页的宽高」。

私以为，Chrome的实现更好理解一些，因为margin和border也会占据网页空间的呀，滚动条不也会滚动到它们的区域吗？

（完）

 

JavaScript浏览器对象（BOM）中有关设备、浏览器屏幕高度和宽度的API介绍的更多相关文章

  1. js中浏览器对象BOM

    参考  :  https://www.cnblogs.com/Peng2014/p/4725524.html 1. window对象   https://www.runoob.com/jsref/ob ...

  2. web开发中不同设备浏览器的区分

    通常区分不同设备浏览器是用JavaScript中的navigator.userAgent.toLowerCase()方式获取浏览器的userAgent信息 //使用javascript判断是否是iPh ...

  3. javascript中获取dom元素的高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

  4. js | javascript中获取dom元素的高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

  5. JavaScript判断对象数组中是否存在某个对象【转】

    1. 如果要判断数组中是否存在某个元素的话很好判断,直接用数组的indexOf方法就好,存在返回当前索引不存在返回-1 var arr=[1,2,3,4] arr.indexOf(3) arr.ind ...

  6. JavaScript中将对象数组中的某个属性值，批量替换成另一个数值

    原文链接 https://segmentfault.com/q/1010000010352622 希望将下列数组中的sh替换成沪,sz替换成深 var stooges = [ {label:1,val ...

  7. javascript 从对象数组中 按字段/属性取最大值或最小值

    var array=[ { "index_id": 119, "area_id": "18335623", "name" ...

  8. android获得屏幕高度和宽度（display中getSize(Point)方法使用）

    方法一: public static int SCREEN_WIDTH; public static int SCREEN_HEIGHT; //获取屏幕 WindowManager wm = (Win ...

  9. 6、JavaScript进阶篇③——浏览器对象、Dom对象

    一.浏览器对象 1. window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法: 注意:在JavaScript基础篇中,已讲解了部分属性,windo ...

随机推荐

  1. iOS缓存功能

    之前做缓存,没有考虑过这个具体的实现. 移动应用在处理网络资源时,一般都会做离线缓存处理,其中以图片缓存最为典型,其中很流行的离线缓存框架为SDWebImage. 但是,离线缓存会占用手机存储空间,所 ...

  2. Spring MVC配置

    web配置 <?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="ht ...

  3. Unity 延迟执行一段代码的较为优雅的方式

    在Unity中,延时执行一段代码或者一个方法或者几个方法的情况非常普遍. 一般会用到Invoke和InvokeRepeating方法.顾名思义,第一个是执行一次,第二个是重复执行. 看下定义: voi ...

  4. Ubuntu 汉化时ubuntu software database is broken错误解决

    关于Ubuntu 汉化时的错误解决:按照网上的方法没有解决 最后 删掉thunderbird mail .这个软件,顺利解决!! 错误:thunderbird-locale-en: Depends: ...

  5. lua coroutine for iterator

    背景 前面的文章演示了使用闭包函数实现 状态的迭代器. 本文演示使用 coroutine来产生迭代器的例子. coroutine迭代器例子 -- 遍历二叉树 local binary_tree = { ...

  6. Linux上 .vimrc文件

    在Linux上面对VIM编辑器的格式的设置通常可以提升工作效率,下面对工作机器上的.vimrc文件的内容进行一总结,以备后续的查询 set smarttab set tabstop=4 set shi ...

  7. Java操作Excel: POI不能创建xlsm问题的方法（源自StackOverFlow）

    write to xlsm (Excel 2007) using apache poi POI的下载(记得把其中的jar包全部加到工程里哦)http://mirror.bit.edu.cn/apach ...

  8. JDBC基础与连接sql2012

    JDBC简介 JDBC全称为:Java Data Base Connectivity(java数据库连接),它主要由接口组成. 组成JDBC的2个包: java.sql javax.sql 以上2个包 ...

  9. 从js向Action传中文参数出现乱码问题的解决方法

    Action获取jsp表单中的中文参数,只要整个项目都采用UTF-8编码格式都不会出现乱码问题:但JSP中用到JS,并从JS向Action传中文参数,就会出现中文乱的现象     做项目的时候,发现A ...

  10. 谁也无法挡住我访问Google---使用Nginx反向代理攻略

    展示最终成果: 浏览器打开​ http://www.manda13.com/(慢搭搜索)这个是自己搭建的百度网盘搜索,欢迎测试 点击右上角“原版Google”,就可以访问Google. 是不是很方便. ...