获取窗口宽度和浏览器窗口宽度的方法

最新推荐文章于 2025-09-24 16:40:19 发布

原创最新推荐文章于 2025-09-24 16:40:19 发布 · 2.2k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

兼容和适配专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何使用JavaScript获取浏览器窗口的视口宽度（window.innerWidth），以及文档元素和body元素的客户端宽度。同时，区分了window.screen.width获取的屏幕固定宽度与窗口缩放的关系。

一、获取浏览器窗口宽度

var browserWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
console.log("浏览器窗口宽度：" + browserWidth);

window.innerWidth：表示浏览器窗口的视口（viewport）宽度，即浏览器中用于显示网页内容的区域的宽度，不包括滚动条等占据空间的部分。
document.documentElement.clientWidth：表示文档元素（HTML 元素，即 <html> 标签）的客户端宽度，也就是网页内容在浏览器中可见的部分的宽度，不包括滚动条和边框。
document.body.clientWidth：表示 <body> 元素的客户端宽度，即 body 元素在浏览器中可见的部分的宽度，同样不包括滚动条和边框。

window.innerWidth会随着浏览器窗口的缩放而变化，因为它表示浏览器窗口的视口宽度，当浏览器窗口被缩放时，视口宽度也会相应改变。

document.documentElement.clientWidth和document.body.clientWidth在一般情况下不会随着浏览器的缩放而变化。这两个值是基于文档元素（<html>）和 <body> 元素的客户端宽度，它们通常是固定的，在浏览器缩放时不会实时改变，除非网页中相关的样式或布局属性被调整以响应浏览器缩放（所以基本也会变）。

二、获取网页内容区域宽度（即窗口宽度、屏幕宽度）

var screenWidth = window.screen.width;
console.log("屏幕宽度：" + screenWidth);

window.screen.width获取的屏幕宽度是固定的，通常代表显示器的分辨率宽度，不会随着窗口的缩放而变化。这个属性返回的是显示器的水平分辨率，所以无论窗口如何缩放，这个值都保持不变。如果需要获取当前浏览器窗口的宽度，应该使用window.innerWidth来获取。