目的
在浏览器中, 用 JS 获取高度和宽度都各有 3 种, 分别包括屏幕, 浏览器和网页的. 用来解决各种计算定位问题! 以至于我各种记不住, 写个随笔方便查询.
屏幕宽高
说明: 顾名思义, 屏幕宽高是指显示器的分辨率. 系统分辨率可以改变这个宽高.
获取方法:
- console.log('宽度:', Windows.screen.width)
- console.log('高度:', Windows.screen.height)
浏览器可用工作区的宽高
说明: 浏览器宽高是指浏览器窗口最大化时的宽高, 普通的最大化后, 一般就是去掉系统任务栏高度, 而宽度和屏幕宽是一样的. 这个宽高在任务栏占用空间变化时会变化.
获取方法:
- console.log('宽度:', Windows.screen.availWidth)
- console.log('高度:', Windows.screen.availHeight)
网页宽高
说明: 网页宽高, 是指页面所占的宽高, 浏览器除了页面内容以外的部分, 不计算在内. 标签栏, 地址栏, 书签栏, 控制台等全不计算在宽高的范围里面, 只有网页内容区域才是.
获取方法:
- console.log('宽度:', Windows.innerWidth)
- console.log('高度:', Windows.innerHeight)
其他 (获取浏览器和屏幕各种高度宽度)
JS 原生方法:
- document.body.clientWidth; // 网页可见区域宽 (body)
- document.body.clientHeight; // 网页可见区域高 (body)
- document.body.offsetWidth; // 网页可见区域宽 (body), 包括 border,margin 等
- document.body.offsetHeight; // 网页可见区域宽 (body), 包括 border,margin 等
- document.body.scrollWidth; // 网页正文全文宽, 包括有滚动条时的未见区域
- document.body.scrollHeight; // 网页正文全文高, 包括有滚动条时的未见区域
- document.body.scrollTop; // 网页被卷去的 Top(滚动条)
- document.body.scrollLeft; // 网页被卷去的 Left(滚动条)
- Windows.screenTop; // 浏览器距离 Top
- Windows.screenLeft; // 浏览器距离 Left
jQuery 方法:
- $(Windows).height(); // 浏览器当前窗口可视区域高度
- $(document).height(); // 浏览器当前窗口文档的高度
- $(document.body).height(); // 浏览器当前窗口文档 body 的高度
- $(document.body).outerHeight(true); // 浏览器当前窗口文档 body 的总高度 包括 border padding margin
- $(Windows).width(); // 浏览器当前窗口可视区域宽度
- $(document).width(); // 浏览器当前窗口文档对象宽度
- $(document.body).width(); // 浏览器当前窗口文档 body 的宽度
- $(document.body).outerWidth(true); // 浏览器当前窗口文档 body 的总宽度 包括 border padding margin
来源: http://www.bubuko.com/infodetail-2996718.html