设备宽度 JS - Javascript

在 Web 开发中，设备宽度是非常重要的一个指标。通过对设备宽度的检测，我们可以为不同尺寸的设备进行适配，从而提升用户体验。

在 Javascript 中，我们可以通过浏览器 API window.screen 或者 window.innerWidth / window.outerWidth 来获取设备宽度。下面是一些常用的代码片段：

// 使用浏览器 API 获取屏幕宽度
const screenWidth = window.screen.width;

// 使用 innerWidth 获取内部宽度
const innerWidth = window.innerWidth;

// 使用 outerWidth 获取包括滚动条等元素在内的宽度
const outerWidth = window.outerWidth;

// 监听窗口宽度的变化
window.addEventListener('resize', () => {
  console.log(`窗口宽度：${window.innerWidth}`);
});

下面是对这些代码片段的解释：

• window.screen.width 会返回屏幕的宽度，这个宽度通常指的是设备可见的宽度，不包括操作系统的界面元素、应用软件等其他元素。
• window.innerWidth 返回视口（viewport）的宽度，这个宽度是不包括滚动条等其他元素在内的。
• window.outerWidth 返回整个浏览器窗口的宽度，包括地址栏、工具栏、滚动条等在内的所有元素。
• 为了实现屏幕适配，我们通常会监听窗口宽度的变化。可以使用 window.addEventListener('resize', callback) 监听窗口大小的变化，然后根据不同的宽度进行适配。