【总结】JS 获取浏览器可视区域的宽高兼容多浏览器

heyNewbie

于 2019-08-23 17:58:25 发布

阅读量1.3k

点赞数

分类专栏：前端文章标签： js IE 宽高兼容

本文链接：https://blog.youkuaiyun.com/heyNewbie/article/details/100043658

版权

本文总结了在JavaScript中获取浏览器可视区域宽高及其兼容性处理的方法，包括IE、Firefox和Opera等浏览器的不同实现方式，以及适用于移动端的解决方案。涉及的属性包括clientWidth、clientHeight、scrollWidth、scrollHeight、offsetWidth、offsetHeight等，可用于屏幕适配、自适应布局和滚动效果的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

平时在些项目的时候，难免会用到一些基础的宽高等数据，可能是用来做屏幕的适配，也可能是用来计算效果的临界值，总之看似简单的数据，却经常能够用得到，不知道小伙伴们都是怎么获取的，反正楼主是比较懒的那种，非常不喜欢去记那些个方法，所以就总结一下，方便以后查找

先来张经典的图

IE中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
FireFox中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
Opera中：
document.body.clientWidth ==> 可见区域宽度
document.body.cl