js获取浏览器窗口大小，屏幕分辨率，网页高&宽

最新推荐文章于 2024-01-02 07:57:42 发布

原创最新推荐文章于 2024-01-02 07:57:42 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文详细解析了网页可见区域的宽度与高度（document.body.clientWidth, document.body.clientHeight），滚动宽度与高度，以及屏幕分辨率（window.screen.width, window.screen.height）。讨论了不同CSS设置对网页尺寸的影响，并介绍了屏幕可见工作区的高宽（window.screen.availHeight, window.screen.availWidth）。

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

document.body.clientWidth 网页可见区域，如1903

html{padding: 10px;margin: 0}

body{margin: 0;padding: 0}
/*或者*/
body{margin: 0;padding: 10px}

/* 1883  当设置padding时，对html的padding有影响 */

html{padding: 0;margin: 10px}
body{padding: 0;margin: 10px}
/*1863 */

document.body.clientHeight 网页可见区域高，如567
html{padding: 0;margin: 0}
body{padding: 10px;margin: 0}
/*587   body的padding有影响*/
 

document.body.scrollWidth & document.body.scrollHeight & document.body.offsetWidth & document.body.offsetHeight同上

window.screen.height 屏幕分辨率高 window.screen.width 屏幕分辨率宽

调整浏览器的缩放不影响屏幕分辨率，系统自带缩放功能会影响。

window.screen.availHeight 屏幕可见工作区高

屏幕分辨率高减去屏幕底部系统状态栏高，底部系统状态栏高貌似不受系统缩放功能影响。

window.screen.availWidth 屏幕可见工作区宽