前端怎么获取视口大小

方式一:使用 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`);
相关推荐
nbsaas-boot5 小时前
Java 正则表达式白皮书:语法详解、工程实践与常用表达式库
开发语言·python·mysql
chao_7895 小时前
二分查找篇——搜索旋转排序数组【LeetCode】两次二分查找
开发语言·数据结构·python·算法·leetcode
一斤代码5 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
风无雨5 小时前
GO 启动 简单服务
开发语言·后端·golang
中微子5 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年5 小时前
从前端转go开发的学习路线
前端·学习·golang
斯普信专业组5 小时前
Go语言包管理完全指南:从基础到最佳实践
开发语言·后端·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina6 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构