📅  最后修改于: 2023-12-03 15:16:08.738000             🧑  作者: Mango
在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
提供了一种简单、快速地获取窗口视口尺寸的方法,在响应式设计中具有重要的作用。开发者可以利用这两个属性来实现动态改变页面的布局和样式。