window对象中与窗口、浏览器大小相关属性(availWidth、clientWidth、width、innerWidth)

By | February 15, 2023

经常会遇到需要获取屏幕宽度、高度,可视区域宽度、高度等问题,也就常跟这几个打交道,一不小心,还真爱弄混淆了
innerWidth,innerHeight 这两个属性为页面视口宽高(注意不是浏览器的,是网页的),所以全屏时宽度一般与分辨率宽度一致,高度则不同,会跟随页面大小而变动
window.innerWidth: 文档显示区(body)的宽度
window.innerHeight 文档显示区(body)的高度

outerWidth,outerHeight 这两个属性是获得浏览器宽高的,全屏时一般等于屏幕 可用分辨率 screen.availWidth/screen.availHeight
window.outrWidth 窗口的宽度(body+任务栏)
window.outerHeight 窗口的高度(body+任务栏)

window.pageYOffset 文档左上角到文档显示区左上角的距离

screen.width 分辨率的宽度,不会变
screen.height 分辨率的高度,不会变

screen.availWidth 去掉任务栏剩余分辨率宽度,不会变
screen.availHeight 去掉任务栏剩余分辨率高度,不会变

Leave a Reply