📜  JavaScript |窗口 innerWidth 和 innerHeight 属性(1)

📅  最后修改于: 2023-12-03 15:16:08.738000             🧑  作者: Mango

JavaScript | 窗口 innerWidth 和 innerHeight 属性

简介

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

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