如何在 JavaScript 中获取设备屏幕的宽度？

在开发移动端 Web 应用中，获取设备屏幕宽度是一项非常基础和重要的功能。本文将介绍如何在 JavaScript 中获取设备屏幕的宽度。

方法一：使用 document.documentElement.clientWidth

document.documentElement.clientWidth 可以返回文档的可见宽度，这也可被解释为当前 viewport 的宽度，不包括滚动条和其他影响视口尺寸的元素。因此我们可以使用以下代码获取设备屏幕的宽度：

let screenWidth = document.documentElement.clientWidth;
console.log(screenWidth);

方法二：使用 window.screen.width

window.screen.width 是一个只读属性，它返回设备屏幕的宽度，单位为像素。它包括整个屏幕的宽度，包括窗口外的边框。下面是使用 window.screen.width 获取设备屏幕宽度的代码：

let screenWidth = window.screen.width;
console.log(screenWidth);

需要注意的是，使用 window.screen.width 获取设备屏幕宽度时需要注意 DPI（每英寸点数）和缩放等因素的影响，不同的设备可能存在差异。

方法三：使用 window.innerWidth

类似于 document.documentElement.clientWidth，window.innerWidth 也返回浏览器视窗（viewport）的宽度，但它包括滚动条和其他影响视口尺寸的元素。因此，我们可以使用以下代码获取设备屏幕宽度：

let screenWidth = window.innerWidth;
console.log(screenWidth);

需要注意的是，使用 window.innerWidth 获取设备屏幕宽度时需要考虑浏览器是否存在滚动条，因为滚动条会占据一部分可视区域。

总结

以上就是三种获取设备屏幕宽度的方法。需要根据具体的应用场景来选择合适的方法，同时也需要注意浏览器和设备的差异。祝愿大家写出更好的移动端 Web 应用！

本文中的代码片段已按照 markdown 标记附上。