浏览器获取宽高

【总结】JS 获取浏览器可视区域的宽高 兼容多浏览器 平时在些项目的时候,难免会用到一些基础的宽高等数据,可能是用来做屏幕的适配,也可能是用来计算效果的临界值,总之看似简单的数据,却经常能够用得到,不知道小伙伴们都是怎么获取的,反正楼主是比较懒的那种,非常不喜欢去记那些个方法,所以就总结一下,方便以后查找 先来张经典的图 IE中: document.body.clientWidth ==> BODY对象宽度 document.bod... 阅读详情
  • screen.availHeight is the height the browser's window can have if it is maximized. (including all the window decoration of the browser like the status bar, menu bars and title bar)
  • $(window).height() is the height of the viewport that shows the website. (excluding your toolbars and status bar and stuff like this)
  • $(document).height() is the height of your document shown in the viewport. If it is higher than $(window).height() you get the scrollbars to scroll the document.

网页可见区域宽:document.body.clientWidth
网页可见区域高:document.body.clientHeight (html下获取浏览器高度,xhtml下获取元素总高度)
网页可见区域高:document.documentElement.clientHeight (xhtml下获取浏览器高度)
网页可见区域宽:document.body.offsetWidth (包括边线的宽)
网页可见区域高:document.body.offsetHeight (包括边线的宽)
网页正文全文宽:document.body.scrollWidth
网页正文全文高:document.body.scrollHeight
网页被卷去的高:document.body.scrollTop
网页被卷去的左:document.body.scrollLeft
网页正文部分上:window.screenTop
网页正文部分左:window.screenLeft
屏幕分辨率的高:window.screen.height
屏幕分辨率的宽:window.screen.width
屏幕可用工作区高度:window.screen.availHeight
屏幕可用工作区宽度:window.screen.availWidth
js获取浏览器宽度高度(整理) ● window.innerHeight: 浏览器内页面可用高度,此高度包含了水平滚动条的高度(若存在)。● window.innerWidth: 浏览器内页面可用宽度,此宽度包含了垂直滚动条的宽度(若存在)。● window.outerWidth: 浏览器宽度,包含了浏览器边框所以这种方式不常用。一般情况作为前端获取浏览器宽度,主要是指获取body的宽度,可操作的可视范围宽度。重点,jquery获取的宽度=浏览器的可视宽度-滚动条的宽度(如果有滚动条) 阅读详情

相关推荐

Java爬虫+URL获取Img高宽.zip

Java爬虫+URL获取Img高宽.zipJava爬虫+URL获取Img高宽.zip

Html 中scroll offset client 总结

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHe...

dashan_1200的博客 208

js 获取屏幕各种宽高的方法(浏览器兼容)

屏幕的有效宽高: window.screen.availHeightwindow.screen.availWidth   网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 网页正文全文宽:document.body.scrollWidth 网页正文全文高:document.body.scrollHeight 网页被卷去的高:docume

浏览器有关的宽高详解

简介window对象表示浏览器打开的窗口(可以省略,全局变量挂载在window对象下,alert,confirm等方法)。document对象是HTML文档,是window对象的一部分(document.body可以写成window.document.body)。与window有关的宽高介绍window.innerHeight和window.outerHeight的区别在于,前者是浏览器内部文档的高

sysuzhyupeng的博客 3296

进阶数据结构——链式前向星

链式前向星是一种进阶的数据结构,主要用于图的存储。我希望大家先看这个视频(蓝色字体点进去) 不然你很难理解的。在图论中,图的存储方式主要有邻接矩阵和邻接表两种。邻接矩阵虽然建图简单方便,但占内存较大,节点数量稍微大点的题目就难以使用(适合稠密图);而邻接表虽然节省空间,但其指针形式难写易错,且vector形式的读取速度较慢,易导致大数据下的超时(TLE)。针对上述问题,链式前向星作为一种折中的方式应运而生。链式前向星本质上是一种静态链表,它将数据以链表形式连接在一起。

ycs66的博客 2138

WebRTC TURN协议初识及turnserver实践

但是TURN协议对服务器有很高的依赖,服务器在带宽和集群上有很大的压力,所以TURN协议通常是当作ICE协议中的一部分来使用。ChannelData message不使用STUN头部,而使用一个4字节的头部,包含了一个称之为信道号的值(channel number),每一个使用中的信道号都与一个特定的peer绑定,即作为对等端地址的一个记号。该relay地址是个公网地址,可以看作是客户端A在公网上的一个代理,任何想要联系A的客户端,只要将数据发送到A的relay地址就可以了。

yinshipin007的博客 566

一张图理解浏览器的位置和尺寸

一张图带你读懂前端必须掌握的浏览器的尺寸信息

Jinuss的博客 1611

从零配置Archery:手把手教你用Docker部署多数据库审核系统(MySQL/PostgreSQL/ClickHouse)

本文详细介绍了如何从零开始使用Docker部署Archery多数据库审核系统,涵盖MySQL、PostgreSQL和ClickHouse的配置与整合。文章提供了生产级Docker-compose配置、审核规则定制、工单流程设置以及企业微信通知集成等实战指南,帮助团队构建统一的企业级SQL审计平台,提升数据库操作规范与安全。

e4f5g6h7的博客 941

获取浏览器宽高

这是较为常用的方法。

weixin_64684095的博客 992

Wireshark抓包分析:如何从HTTP流量中快速定位黑客攻击痕迹(附pcap文件)

本文通过Wireshark实战,详细解析了如何从HTTP流量中快速定位黑客攻击痕迹。文章提供了核心过滤策略,并重点剖析了如何识别SQL注入攻击的流量特征、揭露WebShell的隐蔽通信以及追踪攻击者在横向移动中的行为,帮助安全人员系统性地从pcap文件中还原完整攻击链。

sprite的博客 1010

YOLOv8 改进:添加 LSK 注意力机制

通过添加 LSK 注意力机制,YOLOv8 能够更有效地捕捉特征图上的重要信息,提高检测性能,尤其是在复杂场景下展现出色的表现。这种方法不仅适用于资源受限的设备,还能在丰富多样的实际应用中提供强劲支持。

走向CTO的路上... 1223

VUE动态获取浏览器宽高,动态获取元素宽高,动态设置元素的宽高或样式

VUE动态获取浏览器宽高,动态获取元素宽高,动态设置元素的宽高或样式动态获取浏览器宽高动态获取元素宽高动态设置元素的宽高或样式 动态获取浏览器宽高 created(){ window.addEventListener('resize', this.GetWindowInfo); //注册监听器 this.GetWindowInfo() //页面创建时先调用一次 }, methods:{ GetWindowInfo(){ var width = window.innerWidth // 宽 var

weixin_44380294的博客 2892

YTM32B1M SDK解析31:软件I2C驱动详解

YTM32B1M微控制器软件I2C驱动解析 本文详细介绍了YTM32B1M微控制器中通过GPIO引脚模拟I2C总线的软件实现方案。核心内容包括: 驱动架构:采用swi2c_config_t配置结构体和swi2c_state_t状态结构体管理I2C参数 功能接口:提供初始化、数据传输(主/从模式)、底层控制等API 应用示例:包含基本配置、EEPROM读写、传感器数据采集、总线扫描等典型应用场景 优化建议:给出引脚选择、时序配置、错误处理等方面的最佳实践 该驱动在硬件I2C资源不足时提供可靠替代方案,支持标准

VehSwHwDeveloper的博客 160

JS中怎么获取浏览器以及其他标签的宽高

JS中怎么获取浏览器以及其他标签的宽高经过测试,在JS中是不能直接使用对象名.style.width/height来获取标签的宽高的,强制获取不会返回任何结果,其实,在JS中获取标签的宽高是有特殊语法的,请参照以下程序片段;对浏览器body宽高的获取:<html> <body> <script language="JavaScript"> function t...

FreeSpider 423

一篇文章带你认识 SpringBoot

文章目录一、原有 Spring 优缺点分析二、SpringBoot 的概述 一、原有 Spring 优缺点分析 (1)Spring 的优点分析 Spring是Java企业版(Java Enterprise Edition,JEE,也称J2EE)的轻量级代替品。无需开发重量级的Enterprise JavaBean(EJB),Spring为企业级Java开发提供了一种相对简单的方法,通过依赖注入和面向切面编程,用简单的 Java 对象(Plain Old Java Object,POJO)实现了EJB的功能。

南淮北安的博客 766

【ESP32接入国产大模型之Deepseek】

🥳🥳🥳现在,我们在本教程中,您学习了如何使用ESP32接入语言大模型之Deepseek。🛹🛹🛹从而实现对外部世界进行感知,充分认识这个有机与无机的环境,后期会持续分享esp32跑freertos实用案列🥳🥳🥳科学地合理地进行创作和发挥效益,然后为人类社会发展贡献一点微薄之力。🤣🤣🤣如果你有任何问题,可以通过q group(945348278)加入鹏鹏小分队,期待与你思维的碰撞😘😘😘鸣谢B站UP星汇极客ESP32对接DeepSeek API,实现AI大模型交互功能。

vor234的博客 1万+

vue浏览器与body宽高获取

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>vue浏览器与body...

lxsm的博客 6361

pscad IEEE标准系统搭建说明

pscad IEEE标准系统搭建说明,包含典型的IEEE 9节点、14节点、30节点、39节点和118节点系统。内含标准测试系统的原始数据和潮流结果。

获取浏览器/界面宽高的问题

1.对于IE9+、Chrome、Firefox、Opera 以及 Safari: window.innerHeight - 浏览器内部界面的高度(内容显示区域的高度,F12后会实时改变)window.outerHeight - 浏览器窗体的高度(浏览器的高度)window.innerWidth - 浏览器内部界面的宽度(内容显示区域的宽度,F12后会实时改变)window.outerWidt

u010428565的博客 4668

WINCC7.3破解文件

WINCC7.3硬件够破解文件,有需要的下载!WINCC7.3硬件够破解文件,有需要的下载!

Data-Structures-and-Algorithm-Analysis-in-Java.pdf

作者: Weiss, Mark A. 出版社: Addison Wesley Data Structures and Algorithm Analysis in Java is an “advanced algorithms” book that fits between traditional CS2 and Algorithms Analysis courses. In the old ACM Curriculum Guidelines, this course was known as CS7. This text is for readers who want to learn good programming and algorithm analysis skills simultaneously so that they can develop such programs with the maximum amo...

获取浏览器视口宽高以及元素宽高

适用所有浏览器 var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var w = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeig...

fly_wugui的博客 8653

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox(带书签),MATLAB统计学习工具

JS获取浏览器可视区域宽高

写在前面 浏览器可视区域宽高并不就等于浏览器窗口宽高,而是除去顶部标签栏+滚动条(如果有)+控制台(如果有f12打开)之外的尺寸大小 因为比较简单所以直接上代码: let w, h; // 对于ie9以上浏览器(手机浏览器,一直是保持最新内核标准,当然也支持这种方式获取) w = window.innerWidth; h = window.innerHeight // 对于ie9以下 w = document.documentElement.clientWidth; h = do...

qq_2411868438的博客 5373

js获取浏览器宽高及获取浏览器可视宽高

js获取浏览器宽高及获取浏览器可视宽高 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线和滚动条的宽) 网页可见区域高:document.body.offsetHeight(包括边线的宽) 网页正文全文宽:docu...

Taurus_666 2695

vue获取div的宽高、位置、浏览器宽高、设置位置

vue获取div的宽高、位置、浏览器宽高、设置位置

a15240780264的博客 3712

js获取浏览器 屏幕宽高尺寸

<!doctype html> <head> <meta charset="utf-8"> <title>js获取浏览器宽高尺寸</title> </head> <body> <script language="javascript"> var h = ""; h += " 网页可见区域宽:"+ doc...

jiangbinwangyi的博客 415

Jquery获取关于浏览器相关的宽高的代码

Jquery获取浏览器宽高的代码: $(document).ready(function()                  { alert($(window).height()); //浏览器当前窗口可视区域高度 alert($(documen

Now . Or Never `` 1501

JavaScript获取浏览器可视区域的宽高

JavaScript获取浏览器可视区域的宽高 在做项目的时候,我们常常需要对项目做一些优化,来提升页面响应的速度,比如进入可视区域后再发送请求获取数据或者是填充模板,这个时候就需要能够获取到浏览器的可视区域的宽高: // 获取浏览器可视区域宽高(兼容性比较好,不包括工具栏和滚动条) var browserWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var bro

weixin_43852569的博客 3498

获取浏览器窗口宽高问题总结

s = "网页可见区域宽:"+ document.body.clientWidth;s += "\r\n网页可见区域高:"+ document.body.clientHeight;s += "\r\n网页可见区域高:"+ document.body.offsetWeight +" (包括边线的宽)";s += "\r\n网页可见区域高:"+ document...

weixin_34117211的博客 100
上一篇: 移动设备、手机浏览器Javascript滑动事件代码
下一篇: Ext列表展现--普通排序sortable--全局排序remoteSort(EXTJS 全局排序问题)
zljjava
博客等级 码龄15年 155粉丝 15原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值