方式一:使用 window.innerWidth
和 window.innerHeight
这两个属性分别返回浏览器窗口的视口宽度和高度(单位为像素),包括滚动条占用的空间(如果有的话)。
例如:
javascript">const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
console.log(`视口宽度:${viewportWidth}px,视口高度:${viewportHeight}px`);
方式二:使用 document.documentElement.clientWidth
和 document.documentElement.clientHeight
这两个属性返回文档的可见部分(视口)的宽度和高度,不包括滚动条占用的空间、窗口边框和菜单栏等。(在某些情况下,这两个属性可能更适合获取视口大小。)
例如:
const viewportWidth = document.documentElement.clientWidth;
const viewportHeight = document.documentElement.clientHeight;
console.log(`视口宽度:${viewportWidth}px,视口高度:${viewportHeight}px`);