【笔记】JS获取屏幕窗口网页尺寸

发表于 更新于 阅读次数：

前言

JS获取屏幕窗口网页尺寸

屏幕尺寸

完整操作系统屏幕的尺寸

1
2
screen.width
screen.height
1
2
1920
1080

不含任务栏或菜单栏的系统屏幕的尺寸

  • Windows不含底部任务栏
  • MacOS不含顶部菜单栏和底部程序坞
1
2
screen.availWidth
screen.availHeight
1
2
1920
1055

浏览器窗口到屏幕边缘的距离

浏览器窗口到屏幕左边缘的距离

1
window.screenLeft
1
window.screenX

浏览器窗口到屏幕上边缘的距离

1
window.screenTop
1
window.screenY

窗口尺寸

完整浏览器窗口尺寸

  • 包括顶部菜单栏和右侧滚动条等一切组件的尺寸
1
2
window.outerWidth
window.outerHeight

浏览器窗口中网页可视区域尺寸

  • 不包括顶部菜单栏
  • 包括右侧滚动条
1
2
window.innerWidth
window.innerHeight

网页尺寸

网页内元素在可视区域的尺寸

1
2
document.body.clientWidth
document.body.clientHeight

网页内元素的实际尺寸

  • 即便是超出了可视区域，也包含在内
  • 如果元素没有超出可视区域，则与网页内元素在可视区域的尺寸保持一致
1
2
document.body.scrollWidth
document.body.scrollHeight

网页内元素到浏览器窗口边缘的距离

  • 如果元素在页面左上角，则距离左侧浏览器窗口边缘的距离和距离上侧浏览器窗口边缘的距离都为0

网页内元素到浏览器窗口左边缘的距离

1
document.body.scrollLeft

网页内元素到浏览器窗口上边缘的距离

1
document.body.scrollTop

完成

参考文献

稀土掘金——三余