获取屏幕宽度的JavaScript方法

在开发响应式网站时，您可能需要获取用户设备的屏幕宽度来动态调整网页布局。在本指南中，我们将介绍如何使用JavaScript获取屏幕宽度。

使用 window.screen 对象获取屏幕宽度

您可以使用 window.screen 对象来获取用户设备屏幕的宽度和高度，以下是示例代码：

let screenWidth = window.screen.width;
let screenHeight = window.screen.height;

这将分别获取用户设备的宽度和高度并分配给变量 screenWidth 和 screenHeight。

使用 window.innerWidth 获取视口宽度

这种方式将返回视口的实际宽度，其中视口是指用户正在查看网页的区域，而不是整个设备屏幕。以下是使用 window.innerWidth 的示例代码：

let viewportWidth = window.innerWidth;

设置与视口一致的元素宽度

您可以使用 window.innerWidth 获取视口宽度，然后将其用于为元素动态设置宽度。这使您可以根据屏幕大小自适应网页布局。以下是示例代码：

let viewportWidth = window.innerWidth;
let element = document.getElementById('my-element');
element.style.width = viewportWidth + "px";

此代码将获取视口宽度，将其分配给变量 viewportWidth， 动态选中元素，并将其宽度设置为视口宽度。

以上是获取屏幕宽度的JavaScript方法的简介。您现在可以使用其中的方法来改善网站的响应性并适应各种设备。