前端怎么获取视口大小

news/2024/11/16 20:41:37 标签: 前端, javascript, 开发语言

方式一:使用 window.innerWidthwindow.innerHeight

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

例如:

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

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

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

例如:

const viewportWidth = document.documentElement.clientWidth;
const viewportHeight = document.documentElement.clientHeight;
console.log(`视口宽度:${viewportWidth}px,视口高度:${viewportHeight}px`);

http://www.niftyadmin.cn/n/5754597.html

相关文章

模态融合技术在多模态大模型中的应用研究

随着人工智能技术的快速发展,多模态大模型成为了研究的热点。模态融合技术作为多模态大模型的核心,它允许模型处理和理解来自不同模态(如文本、图像、音频)的数据。本文旨在探讨模态融合技术的原理、方法、挑战及其在多模态大模型…

MySQL时间字段TIMESTAMP和DATETIME

SELECT global.time_zone, session.time_zone;查询数据库的全局时区和当前会话的时区信息,一般如果使用navicat进行连接,没有显示指定时区信息,会默认使用system_time_zone。 可以使用 SET time_zone 08:00; SELECT global.time_zone, sess…

Cpolar 内网穿透使用

Cpolar登录地址:cpolar - secure introspectable tunnels to localhost 使用固定公网TCP连接ssh ssh -p端口号 用户名公网地址

Linux---常用shell脚本

目录 一.网络服务 开启network服务 网口IP配置 聚合口配置 前言 秋招拿到了科大讯飞的offer,可是由于某些原因无法完成三方签署,心情还是比较失落的,或许写一篇技术博客,活跃一下大脑思维也是一种不错的放松方式。 一.网络服务 …

面试篇-项目管理

⼀、构建管理 项目为什么选择Maven构建? 选择Maven进行项目构建有以下几个主要原因: 1. 依赖管理:Maven 提供了强大的依赖管理功能,可以自动下载项目所需的第三方库和依赖,并且可以管理这些依赖的版本、范围等信息。这简化了项…

Latex表格中多行合并后将内容居中显示

Latex表格中多行合并后将内容居中显示 目标效果Latex代码ProblemLaTeX Code:**Explanation:**Resulting Output: 目标效果 Latex代码 \begin{table}[h]\centering\caption{Example Table with Merged Cells}\begin{tabular}{|c|c|c|c|}\hline\textbf{Row 1, Col 1} & \mul…

STL之vecor的使用(超详解)

目录 1. C/C中的数组 1.1. C语言中的数组 1.2. C中的数组 2. vector的接口 2.1. vector的迭代器 2.2. vector的初始化与销毁 2.3. vector的容量操作 2.4. vector的访问操作 2.5. vector的修改操作 💓 博客主页:C-SDN花园GGbond ⏩ 文章专栏…

卷积神经网络 (CNN)

代码功能 网络结构: 卷积层: 两个卷积层,每个卷积层后接 ReLU 激活函数。 最大池化层用于降低维度。 全连接层: 使用一个隐藏层(128 个神经元)和一个输出层(10 类分类任务)。 数据集…