JavaScript获取屏幕宽度高度的最简洁代码是怎样的

JavaScript获取屏幕宽度高度的最简洁代码是怎样的

导语

在前端开发中，经常需要获取屏幕的宽度和高度，以实现响应式布局、适配不同设备或进行其他与屏幕尺寸相关的操作。JavaScript提供了多种方式来获取这些信息，但哪种方法最简洁高效呢？本文将深入探讨这个问题，并提供最优解决方案。

核心概念解释

在JavaScript中，与屏幕尺寸相关的主要有三个对象：

1. window.screen：提供有关用户屏幕的信息
2. window.innerWidth/innerHeight：浏览器窗口的内部宽度和高度（包括滚动条）
3. document.documentElement.clientWidth/clientHeight：文档的可见区域宽度和高度

最简洁的获取屏幕尺寸的代码

获取屏幕分辨率（物理像素）

// 获取屏幕的完整宽度和高度（包括任务栏等系统界面）
const screenWidth = window.screen.width;
const screenHeight = window.screen.height;

// 简洁写法
const [sw, sh] = [screen.width, screen.height];

获取浏览器视口尺寸（逻辑像素）

// 获取浏览器视口宽度和高度（不包括工具栏和滚动条）
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;

// 简洁写法
const [vw, vh] = [innerWidth, innerHeight];

获取文档显示区域尺寸

// 获取文档显示区域的宽度和高度
const docWidth = document.documentElement.clientWidth;
const docHeight = document.documentElement.clientHeight;

// 简洁写法
const {clientWidth: cw, clientHeight: ch} = document.documentElement;

使用场景

1. 响应式设计：根据屏幕尺寸调整布局
2. 全屏应用：需要精确控制显示区域
3. 游戏开发：根据屏幕尺寸调整游戏画布
4. 广告投放：根据屏幕尺寸选择适合的广告素材
5. 数据分析：收集用户设备信息

优缺点对比

window.screen

• 优点：获取的是物理屏幕的实际尺寸
• 缺点：在多显示器环境下可能不准确

window.innerWidth/innerHeight

• 优点：反映当前浏览器窗口的实际可用空间
• 缺点：包含滚动条宽度，不同浏览器可能有差异

document.documentElement.clientWidth/clientHeight

• 优点：不包含滚动条，更精确反映内容区域
• 缺点：在怪异模式下可能表现不一致

实战案例

案例1：响应式导航菜单

function toggleMenu() {
  const nav = document.getElementById('main-nav');
  if (innerWidth < 768) {
    nav.classList.add('mobile-menu');
  } else {
    nav.classList.remove('mobile-menu');
  }
}

// 监听窗口变化
window.addEventListener('resize', toggleMenu);

案例2：全屏背景图片适配

function setBackground() {
  const bg = document.getElementById('fullscreen-bg');
  bg.style.width = `${innerWidth}px`;
  bg.style.height = `${innerHeight}px`;
}

// 初始设置和窗口变化时更新
setBackground();
window.addEventListener('resize', setBackground);

案例3：画布尺寸适配

const canvas = document.getElementById('game-canvas');
function resizeCanvas() {
  canvas.width = innerWidth * window.devicePixelRatio;
  canvas.height = innerHeight * window.devicePixelRatio;
  canvas.style.width = `${innerWidth}px`;
  canvas.style.height = `${innerHeight}px`;
}

resizeCanvas();
window.addEventListener('resize', resizeCanvas);

注意事项

1. 设备像素比：在高DPI设备上，物理像素与逻辑像素不同，可使用window.devicePixelRatio获取比例
2. 移动设备：需要考虑视口meta标签的设置
3. 性能：频繁获取尺寸可能影响性能，特别是在resize事件中
4. 浏览器兼容性：大多数现代浏览器都支持上述属性，但旧版IE可能需要特殊处理

小结

获取屏幕宽度和高度最简洁的代码是：

// 屏幕分辨率
const [sw, sh] = [screen.width, screen.height];

// 视口尺寸
const [vw, vh] = [innerWidth, innerHeight];

// 文档显示区域
const {clientWidth: cw, clientHeight: ch} = document.documentElement;

在实际开发中，应根据具体需求选择合适的属性。对于大多数响应式设计场景，window.innerWidth和window.innerHeight是最常用的选择，它们提供了浏览器窗口的实际可用空间信息，代码也最为简洁。