JavaScript | 窗口 innerWidth 和 innerHeight 属性

简介

在JavaScript中，可以通过window.innerWidth和window.innerHeight属性获取当前窗口的视口宽度和高度，以像素为单位。

window.innerWidth和window.innerHeight属性可以为页面在响应式设计中提供许多有用的信息，尤其是用于计算CSS单元的值，如vh和vw。

使用方法

获取窗口宽度

var windowWidth = window.innerWidth;

获取窗口高度

var windowHeight = window.innerHeight;

监听窗口大小变化

使用window.addEventListener()方法监听resize事件，即可在每次窗口大小被改变时获取新的窗口宽度和高度。

window.addEventListener('resize', function() {
  var windowWidth = window.innerWidth;
  var windowHeight = window.innerHeight;
  
  // 在这里执行相应的操作
});

兼容性

window.innerWidth和window.innerHeight属性在大多数主流浏览器中都得到了支持，包括最新版本的Chrome、Firefox、Safari和Edge，以及IE10及以上版本。

有些浏览器可能会将视口的尺寸包括滚动条占用的空间在内，此时需要进行相应的兼容性处理。可以使用以下代码解决该问题：

var windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

结论

window.innerWidth和window.innerHeight提供了一种简单、快速地获取窗口视口尺寸的方法，在响应式设计中具有重要的作用。开发者可以利用这两个属性来实现动态改变页面的布局和样式。