前端怎么获取视口大小

方式一:使用 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`);
相关推荐
EndingCoder1 分钟前
搜索算法在前端的实践
前端·算法·性能优化·状态模式·搜索算法
sunbyte6 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
Favor_Yang10 分钟前
SQL Server通过存储过程实现HTML页面生成
前端·信息可视化·sqlserver·存储过程
沉默媛21 分钟前
如何安装python以及jupyter notebook
开发语言·python·jupyter
_Chipen1 小时前
C++基础问题
开发语言·c++
中微子1 小时前
JavaScript事件循环机制:面试官最爱问的10个问题详解
前端
Eighteen Z1 小时前
CSS揭秘:10.平行四边形
前端·css·css3
拾光拾趣录1 小时前
虚拟DOM
前端·vue.js·dom
爱学习的茄子1 小时前
JavaScript事件循环深度解析:理解异步执行的本质
前端·javascript·面试
1024小神1 小时前
cocos游戏开发中多角色碰撞,物理反弹后改变方向的实现逻辑
前端·javascript