获取显示器宽度 JavaScript

在前端开发中，我们经常需要获取用户的屏幕宽度，以便对响应式设计和布局进行适当的调整。在本文中，我们将介绍如何使用 JavaScript 获取显示器宽度。

方法一：使用 window.screen 对象

JavaScript 提供了 window.screen 对象，可以访问到浏览器窗口所在的屏幕信息。其中，screen 对象有一个 width 属性，代表屏幕的宽度，我们可以通过以下代码获取它：

const screenWidth = window.screen.width;

代码说明：

• window.screen：表示当前窗口所在的屏幕信息。
• width：表示屏幕的宽度，单位是像素。

需要注意的是，window.screen 对象只能获取到屏幕的信息，而不是窗口的信息。如果浏览器窗口没有占满整个屏幕，那么获取到的屏幕宽度可能会比窗口的宽度大。

方法二：使用 window.innerWidth 对象

除了使用 window.screen 对象，我们还可以使用 window.innerWidth 对象来获取浏览器窗口的宽度。和 window.screen 不同，window.innerWidth 可以获取到真正的窗口宽度，而不受屏幕分辨率的影响。我们可以使用以下代码来获取窗口宽度：

const windowWidth = window.innerWidth;

代码说明：

• window.innerWidth：表示当前窗口的宽度，单位是像素。

需要注意的是，window.innerWidth 对象只能获取到窗口的宽度，而不是整个屏幕的宽度。如果浏览器窗口没有占满整个屏幕，那么获取到的窗口宽度可能会比屏幕的宽度小。

方法三：结合方法一和方法二

如果在不同设备上，获取到的屏幕宽度和窗口宽度会有一些差异，我们可以结合使用方法一和方法二，获取两个宽度，取其中的较小值作为真正的屏幕宽度。代码示例如下：

const screenWidth = Math.min(window.screen.width, window.innerWidth);

代码说明：

• window.screen.width：表示屏幕的宽度。
• window.innerWidth：表示当前窗口的宽度。
• Math.min：返回参数中最小的值。

总结

本文介绍了三种获取显示器宽度的方法：使用 window.screen 对象、使用 window.innerWidth 对象、结合两者。需要根据实际情况选择合适的方法。如果需要获取窗口宽度，优先考虑使用 window.innerWidth 对象。如果需要获取屏幕宽度，优先考虑使用 window.screen 对象。如果需要兼顾这两个宽度，可以结合使用两者。