JavaScript 获取视口尺寸

在 web 开发中，经常需要获取浏览器的视口（viewport）尺寸，以便进行相应的布局和显示操作。本文将介绍如何使用 JavaScript 获取视口尺寸。

1. 使用 innerWidth 和 innerHeight 属性

在 JavaScript 中，可以使用 window.innerWidth 和 window.innerHeight 属性来获取浏览器窗口的视口宽度和高度，单位为像素（px）。

// 获取视口宽度和高度
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;

console.log(`Viewport width: ${viewportWidth}px`);
console.log(`Viewport height: ${viewportHeight}px`);

值得注意的是，如果页面存在滚动条，上述方法获取的视口尺寸不包括滚动条的宽度。如果需要包括滚动条宽度，则可以使用 document.documentElement.clientWidth 和 document.documentElement.clientHeight 属性。

2. 监听 resize 事件获取视口尺寸变化

如果需要实时获取视口尺寸的变化，可以使用 window.onresize 事件，该事件会在浏览器窗口大小变化时触发。

// 监听 resize 事件
window.onresize = function() {
  const viewportWidth = window.innerWidth;
  const viewportHeight = window.innerHeight;

  console.log(`Viewport width: ${viewportWidth}px`);
  console.log(`Viewport height: ${viewportHeight}px`);
}

3. 兼容性问题

需要注意的是，innerWidth 和 innerHeight 属性在一些早期版本的浏览器中可能不被支持。在这种情况下，可以通过设置 document.documentElement.clientWidth 和 document.documentElement.clientHeight 的值来实现相同的效果。

const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
const viewportHeight = window.innerHeight || document.documentElement.clientHeight;

总结

在本文中，我们介绍了如何使用 JavaScript 获取浏览器的视口尺寸。innerWidth 和 innerHeight 属性能够快速获取当前视口尺寸，而 onresize 事件则可以实时监测视口尺寸变化。在编写代码时，需要使用兼容性较好的方式来保证代码的正确性。