前端怎么获取视口大小

方式一：使用 window.innerWidth 和 window.innerHeight

这两个属性分别返回浏览器窗口的视口宽度和高度（单位为像素），包括滚动条占用的空间（如果有的话）。

例如：

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`);