JavaScript获取浏览器和屏幕的各种宽度高度

在前端开发中，获取浏览器和屏幕的宽度和高度是一项基本任务。这些信息可以用于响应式设计、布局调整、元素定位等方面。本文将介绍如何使用JavaScript获取各种宽度高度，并提供具体的示例代码。

1. 获取浏览器窗口大小

我们可以使用window.innerWidth和window.innerHeight属性来获取浏览器窗口的视口大小，即可见区域的宽度和高度（不包含滚动条）。示例代码如下：

const width = window.innerWidth;
const height = window.innerHeight;
console.log(`Window size: ${width} x ${height}`);

需要注意的是，window.innerWidth和window.innerHeight返回的值是整数，单位为像素。

2. 获取网页文档大小

如果需要获取整个网页文档的大小（包含滚动条），可以使用document.documentElement.clientWidth和document.documentElement.clientHeight属性。示例代码如下：

const docWidth = document.documentElement.clientWidth;
const docHeight = document.documentElement.clientHeight;
console.log(`Document size: ${docWidth} x ${docHeight}`);

同样地，这两个属性返回的值也是整数，单位为像素。

3. 获取屏幕大小

除了获取浏览器窗口和网页文档的大小，还可以获取用户的屏幕大小。可以使用screen.width和screen.height属性来获取屏幕的分辨率，即物理像素的宽度和高度。示例代码如下：

const screenWidth = screen.width;
const screenHeight = screen.height;
console.log(`Screen size: ${screenWidth} x ${screenHeight}`);

需要注意的是，这两个属性返回的值也是整数，单位为像素。

4. 获取设备像素比

最后，我们还可以获取设备像素比（device pixel ratio），用于响应式设计和高清屏适配。可以使用window.devicePixelRatio属性来获取当前设备的像素比。例如，在Retina屏幕上，像素比为2，意味着每个CSS像素对应两个物理像素。示例代码如下：

const devicePixelRatio = window.devicePixelRatio;
console.log(`Device pixel ratio: ${devicePixelRatio}`);

需要注意的是，window.devicePixelRatio返回的值是一个小数，通常为1、1.5或2等。

结论

JavaScript提供了丰富的API来获取浏览器和屏幕的各种宽度高度信息，开发者可以根据实际需求选择合适的API。本文介绍了四个常用的API：window.innerWidth、window.innerHeight、document.documentElement.clientWidth、document.documentElement.clientHeight、screen.width、screen.height和window.devicePixelRatio，并提供了相应的示例代码。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/1826