前端怎么获取视口大小

方式一:使用 window.innerWidthwindow.innerHeight

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

例如:

javascript 复制代码
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
console.log(`视口宽度:${viewportWidth}px,视口高度:${viewportHeight}px`);

方式二:使用 document.documentElement.clientWidthdocument.documentElement.clientHeight

这两个属性返回文档的可见部分(视口)的宽度和高度,不包括滚动条占用的空间、窗口边框和菜单栏等。(在某些情况下,这两个属性可能更适合获取视口大小。)

例如:

js 复制代码
const viewportWidth = document.documentElement.clientWidth;
const viewportHeight = document.documentElement.clientHeight;
console.log(`视口宽度:${viewportWidth}px,视口高度:${viewportHeight}px`);
相关推荐
01传说7 分钟前
vue3 配置安装 pnpm 报错 已解决
java·前端·vue.js·前端框架·npm·node.js
小李飞飞砖14 分钟前
React Native 组件间通信方式详解
javascript·react native·react.js
小李飞飞砖14 分钟前
React Native 状态管理方案全面对比
javascript·react native·react.js
烛阴1 小时前
Python装饰器解除:如何让被装饰的函数重获自由?
前端·python
Boilermaker19921 小时前
【Java EE】Mybatis-Plus
java·开发语言·java-ee
千鼎数字孪生-可视化2 小时前
Web技术栈重塑HMI开发:HTML5+WebGL的轻量化实践路径
前端·html5·webgl
凌辰揽月2 小时前
7月10号总结 (1)
前端·css·css3
aramae2 小时前
C++ -- STL -- vector
开发语言·c++·笔记·后端·visual studio
Tony小周2 小时前
实现一个点击输入框可以弹出的数字软键盘控件 qt 5.12
开发语言·数据库·qt
天天扭码2 小时前
很全面的前端面试——CSS篇(上)
前端·css·面试