一、使用 window.innerWidth 和 window.innerHeight
这是较为常用的方法。
const viewportWidth = window.innerWidth;const viewportHeight = window.innerHeight;console.log(`视口宽度:${viewportWidth},视口高度:${viewportHeight}`);
二、使用 document.documentElement.clientWidth 和 document.documentElement.clientHeight
const viewportWidth = document.documentElement.clientWidth;const viewportHeight = document.documentElement.clientHeight;console.log(`视口宽度:${viewportWidth},视口高度:${viewportHeight}`);
三、使用 document.body.clientWidth 和 document.body.clientHeight
需要注意的是,这种方式可能在某些情况下不太准确,因为它会受到页面滚动条等因素的影响。
const viewportWidth = document.body.clientWidth;const viewportHeight = document.body.clientHeight;console.log(`视口宽度:${viewportWidth},视口高度:${viewportHeight}`);