当前位置： 首页 > news >正文

可视区域兼容性问题的思考及方法封装

news 2026/5/25 14:56:01

 今日在复习可视化尺寸获取时突发奇想，为什么要在怪异模式下使用document.body.clientWidth，在标准模式下使用document.documentElement.clientWidth？以及是否在IE8及以下的版本中其中一个获取方式将返回undefined或0。
 出于该问题的思考，有了以下代码的测试，在这里我尝试还原IE8以下的IE浏览器版本（通过Edge浏览器的仿真IE），结果是三个方法都有返回值，好似不存在兼容性的问题。 但当我给他们设置边界条件时发现不同模式下总会有一个方法返回值会出现问题。
 怪异模式下的document.documentElement.clientWidth、标准模式下的document.body.clientWidth无法获取到可视窗口的真实尺寸。

一、为什么怪异模式下使用body.clientWidth

 经过测试，在怪异模式下使用document.documentElement.clientWidth无法正确的获取到可视窗口的真实宽度，得到的结果为当前窗口中HTML元素的真实宽度，假设当前的可视窗口宽度为1350px，HTML元素的真实宽度为500px，那么在怪异模式（BackCompat）下使用document.documentElement.clientWidth方法所得到的值将为500px，而不是1350px。因此在怪异模式下使用的是document.body.clientWidth方法获取可视化区域宽度。
 至此问题解决，但在使用document.body.clientWidth的前提下我们需要注意一点：document.body.clientWidth方法获取的宽度不包含滚动条的宽度。

二、为什么标准模式下使用documentElement.clientWidth

 相同的道理，在标准模式下使用document.body.clientWidth无法正确获取到可视化窗口的真实宽度。值得提的一点是不管在标准模式、怪异模式下，使用window.innerWidth方法都能正确的获取到正确的且包含滚动条宽度的可视化区域宽度，因此当浏览器兼容该方法时应当优先使用。

三、测试代码

 前提条件：在CSS中将html、body两个元素的宽高设置为5000px、清除margin、padding。

1. 标准模式测试

 默认的HTML就是处于标准渲染模式（CSS1Compat），根据下列的代码我们可以在页面上看到window.innerWidth、document.documentElement.clientWidth方法可以正确的得到可视宽度，且可以看出document.documentElement.clientWidth方法并没有将滚动条宽度纳入计算。而document.body.clientWidth则是获取到了body元素的真实宽度。

/*** IE8/IE9以下无法直接使用window.innerWidth、window.innerHeight获取可视区域尺寸* 此时与滚动条滚动距离获取类似，我们将从body、html元素上获取页面的宽度、高度*  此时将出现一个渲染概念（标准模式、怪异模式）*  我们可以通过document.compatMode来获取到当前的渲染模式*    1. backCompat:怪异模式*    2. CSS1Compat:标准模式或准标准模式（如今的模式已经标准化，准标准模式失去意义）* 在怪异模式下*/
document.writeln(`${document.compatMode === "CSS1Compat" ? "标准模式" : "怪异模式"}下通过body获取的可视窗口宽度为: ${document.body.clientWidth}<br/>`
);
document.writeln(`${document.compatMode === "CSS1Compat" ? "标准模式" : "怪异模式"}下通过body获取的可视窗口高度为: ${document.body.clientHeight}<br/>`
);document.writeln(`${document.compatMode === "CSS1Compat" ? "标准模式" : "怪异模式"}下通过documentElement获取的可视窗口宽度为: ${document.documentElement.clientWidth}<br/>`
);
document.writeln(`${document.compatMode === "CSS1Compat" ? "标准模式" : "怪异模式"}下通过documentElement获取的可视窗口高度为: ${document.documentElement.clientHeight}<br/>`
);

效果如下：

2. 怪异模式测试

 想要将浏览器的渲染模式修改为怪异模式，我们可以修改HTML文件的文档类型，如下代码所示，将<!DOCTYPE html>修改为<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>。

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<!-- <!DOCTYPE html> -->

测试效果如下：

 从验证的结果中我们能够明确的发现两个方法在不同模式下可能遇到的问题，因此在封装可视化尺寸获取方法考虑兼容性问题时，应该注意到这一点。

四、可视尺寸兼容性方法封装

 我们可以对可视化尺寸进行简单的兼容性封装：

function getClientSize(){if (window.innerWidth) {return {width: window.innerWidth,height: window.innerHeight}} /*** 具体见MDN:https://developer.mozilla.org/zh-CN/docs/Web/API/Document/compatMode* backCompat 怪异模式* CSS1Compat 标准模式*  */ else if (document.compatMode === 'backCompat') {return {width: document.body.clientWidth,height: document.body.clientHeight}} else {return {width: document.documentElement.clientWidth,height: document.documentElement.clientHeight}}
}

相关文章：

可视区域兼容性问题的思考及方法封装

今日在复习可视化尺寸获取时突发奇想&#xff0c;为什么要在怪异模式下使用document.body.clientWidth&#xff0c;在标准模式下使用document.documentElement.clientWidth&#xff1f;以及是否在IE8及以下的版本中其中一个获取方式将返回undefined或0。  出于该问题的思考&am…...

编程日记 2023/5/30 13:54:41

安全工具 | CMSeeK [指纹识别]

0x00 免责声明 本文仅限于学习讨论与技术知识的分享&#xff0c;不得违反当地国家的法律法规。对于传播、利用文章中提供的信息而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;本文作者不为此承担任何责任&#xff0c;一旦造成后果请自行承担…...

编程日记 2023/5/24 10:09:17

Android新logcat使用技巧

Android新logcat使用技巧 logcat新UI出现后&#xff0c;我常困惑于怎么过滤log&#xff0c;和以前的UI差异比较大&#xff0c;新UI界面结构如下&#xff1a; 这个新的 logcat 的问题是如何过滤信息并不是很明显。 获取应用的日志信息 要获取我们当前调试应用的日志信息&…...

编程日记 2023/5/30 20:00:50

使用Makefile笔记总结

文章目录 一、简单了解Makefile1.1 Makefile示例1.2 基本规则1.3 make是如何工作的1.4 使用变量1.5 make自动推导 二、变量2.1 变量的定义和引用2.2 变量的两种高级用法2.3 override 和 define 关键字2.4 环境变量与目标变量2.5 自动变量 三、Makefile规则3.1 通配符3.2 目标依…...

编程日记 2023/5/24 9:59:15

npm下载依赖项目跑不起来--解决方案

code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: vue-element-admin4.4.0 npm ERR! Found: webpack4.46.0 npm ERR! node_modules/webpack npm ERR! webpack“^4.23.0” from the root project npm ERR! npm ERR! Coul…...

编程日记 2023/5/30 3:50:31

SolVES模型生态系统服务功能社会价值评估

查看原文>>>SolVES 模型生态系统服务功能社会价值评估&#xff08;基于多源环境QGIS、PostgreSQL、ArcGIS、Maxent、R语言&#xff09; 目录 第一章、理论基础与研究热点 第二章、SolVES 4.0 模型运行环境配置 第三章、SolVES 4.0 模型运行 第四章、数据获取与入…...

编程日记 2023/5/24 9:49:13

Godot引擎 4.0 文档 - 入门介绍 - 学习新功能

本文为Google Translate英译中结果&#xff0c;DrGraph在此基础上加了一些校正。英文原版页面&#xff1a; Learning new features — Godot Engine (stable) documentation in English 学习新功能 Godot 是一个功能丰富的游戏引擎。有很多关于它的知识。本页介绍了如何使用…...

编程日记 2023/5/30 20:01:20

如何进行MySQL漏洞扫描

MySQL是一款广泛使用的关系型数据库管理系统&#xff0c;但由于其复杂的结构和功能&#xff0c;也存在不少安全漏洞&#xff0c;容易被黑客攻击。为了解决这些安全问题&#xff0c;进行MySQL漏洞扫描是必要的。那么MySQL怎么进行漏洞扫描?如何进行漏洞扫描?接下来就让小编带大…...

编程日记 2023/5/24 9:39:10

C语言函数大全-- x 开头的函数（3）

C语言函数大全 本篇介绍C语言函数大全-- x 开头的函数 1. xdr_opaque 1.1 函数说明 函数声明函数功能bool_t xdr_opaque(XDR *xdrs, char *buf, u_int len);用于编码或解码任意长度的二进制数据 参数&#xff1a; xdrs &#xff1a; 指向 XDR 数据结构的指针&#xff0c;表…...

编程日记 2023/5/29 15:28:28

计算机图形学-GAMES101-12阴影

Shadow mapping 问题的提出 我们之前在进行着色时&#xff0c;对于每个物体仅考虑自己&#xff0c;而不考虑其他物体对它的影响。限定在光栅化中&#xff0c;如何解决阴影问题呢&#xff1f;阴影能被摄像机看到&#xff0c;但不能被光源所照亮。经典的Shadow mapping只能处理…...

编程日记 2023/5/31 22:53:09

iOS_Swift高阶函数

iOS_Swift高阶函数 #mermaid-svg-NxX1czIESDq47OQw {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-NxX1czIESDq47OQw .error-icon{fill:#552222;}#mermaid-svg-NxX1czIESDq47OQw .error-text{fill:#552222;stroke:#…...

编程日记 2023/5/31 22:54:54

探索Vue的组件世界-组件复用

目录 Mixin【混入】 缺陷 HOC&#xff08;higher order component&#xff09;【高阶组件】 相比较Mixin的优点&#xff1a; 不足&#xff1a; Renderless组件【函数式组件&#xff0c;无渲染组件&#xff0c;Vue社区使用比较多的一种业务复用模式】 优点&#xff1a; M…...

编程日记 2023/5/31 5:02:21

OMA通道-2

1 简介 本文档中指定的 API 使移动应用程序能够访问移动设备中的不同 SE&#xff0c;例如 SIM 或嵌入式 SE。 本规范提供了接口定义和 UML 图&#xff0c;以允许在各种移动平台和不同的编程语言中实现。 如果编程语言支持命名空间&#xff0c;则它应为 org.simalliance.openmob…...

编程日记 2023/5/31 6:52:25

SAP 用CO13冲销工序报工，但是没有产生货物移动（TCODE:CO1P 、 SE38 :CORUPROC，CORUAFWP）

前言 通常情况下&#xff0c;对PPO做GI或GR的时候&#xff0c;出现的异常可以在COGI中间被列出&#xff1b;在这些数据进入COGI之前&#xff0c;系统会把这些数据记录在CO1P中&#xff1b;换句话说&#xff0c;系统有时会出现DB的更新延时&#xff0c;当延时发生的时候&#xf…...

编程日记 2023/5/31 15:57:16

信息收集-服务器信息

服务器上面可以运行大量的系统服务和第三方应用服务&#xff0c;如果操作系统或者第三方软件没有及时升级打补丁&#xff0c;攻击者就有可能直接通过服务器上运行的服务进行攻击。 服务器需要收集的信息包含三个方面&#xff1a; 操作系统信息等识别waf&#xff08;Web应用程…...

编程日记 2023/5/31 6:31:05

连续签到积分兑换试用流量主小程序开发

每日签到积分兑换试用流量主小程序开发 打卡兑奖小程序。用户签到活得积分。积分可以兑换商品。观看激励视频广告可以积分翻倍。 用户可以参加试用商品活动参加试用需要提交信息。可以通过分享方式直接获取试用资格。 以下是流量主小程序的功能列表&#xff1a; 广告位管理&a…...

编程日记 2023/5/30 20:01:56

C语言—自定义类型（结构体、枚举、联合）

自定义类型 结构体结构体的声明特殊的声明结构的自引用结构体变量的定义和初始化结构体内存对齐修改默认对齐数offsetof宏 结构体传参 位段位段的定义&#xff08;声明&#xff09;位段的内存分配位段的跨平台问题位段的应用 枚举枚举类型的定义及使用枚举的优点 联合&#xff…...

编程日记 2023/5/24 8:53:58

Node.js博客项目开发思路笔记

博客项目介绍 1. 目标 开发一个博客系统&#xff0c;具备博客基本功能只开发 server 端&#xff0c;不关心前端 2. 需求 首页、作者页、博客详情页登陆页管理中心、新建页、编辑页 3. 技术方案 数据如何存储 博客 idtitlecontentcreatetimeauthor1标题 1内容 11111112z…...

编程日记 2023/5/24 8:48:56

python 之 shutil 文件的复制、删除、移动文件以及目录，并支持文件的归档、压缩和解压

一、shutil shutil 模块于文件和文件集合的高级操作&#xff0c;包括&#xff1a;复制、删除、移动文件以及目录&#xff0c;并支持文件的归档、压缩和解压等 二、使用例子 复制文件及权限 shutil.copy(src, dst)复制文件及权限&#xff1b;src 和 dst 文件路径。dst 文件名或…...

编程日记 2023/5/24 8:43:54

jface

JFace 是建立在 SWT 之上的 UI 部件&#xff0c;它是 SWT 的扩展并能和SWT交互。 ApplicationWindow和Action org.eclipse.jface.window.ApplicationWindow; JFace为了简化窗口的设计特别设计了类&#xff0c;比如ApplicationWindow这一个类&#xff0c;它里面包含了六个默认…...

编程日记 2023/5/24 8:38:53

安卓逆向实战：Frida内存砸壳提取DEX原理与技巧

1. 这不是“脱壳”&#xff0c;是逆向工程中一次精准的内存手术你打开一个加固过的安卓App&#xff0c;用常规工具解包&#xff0c;发现classes.dex只有几KB&#xff0c;里面全是混淆到面目全非的壳代码&#xff1b;用dex2jar反编译&#xff0c;报错“Not a valid dex file”&a…...

编程新知 2026/5/25 14:27:48

3个关键步骤：从零开始使用AlphaFold 3进行蛋白质结构预测

3个关键步骤&#xff1a;从零开始使用AlphaFold 3进行蛋白质结构预测 【免费下载链接】alphafold3 AlphaFold 3 inference pipeline. 项目地址: https://gitcode.com/gh_mirrors/alp/alphafold3 AlphaFold 3是DeepMind开发的最新蛋白质结构预测工具&#xff0c;它不仅能…...

编程新知 2026/5/25 13:23:17

学习课程学习报告

本周主要学习了深度学习的基础理论&#xff0c;包括深度学习的数学本质、激活函数、前向传播与反向传播的原理。重点理解了非线性激活函数对模型表达能力的作用&#xff0c;掌握了前向传播的矩阵表示&#xff0c;并推导了反向传播的梯度计算过程&#xff0c;为后续神经网络训练…...

编程新知 2026/5/25 11:02:54

Linux网络编程基础（UDP socket编程）

UDP&#xff08;用户数据报协议&#xff09;是一种无连接的传输层协议&#xff0c;与TCP不同&#xff0c;它不保证数据包的顺序和可靠性&#xff0c;但其简单性和低延迟特性使其在实时应用中非常有用。一、UDP协议核心特性UDP作为传输层协议&#xff0c;与TCP的“可靠连接”不同…...

编程新知 2026/5/25 10:56:12

从‘调参苦手’到‘一击即中’：实战解读glmnet中lambda.min与lambda.1se到底怎么选

从‘调参苦手’到‘一击即中’&#xff1a;实战解读glmnet中lambda.min与lambda.1se到底怎么选 在机器学习的世界里&#xff0c;LASSO回归就像一位精明的裁缝&#xff0c;能够为数据量身定制最合身的模型。而glmnet包中的lambda.min和lambda.1se&#xff0c;则是这位裁缝手中的…...

编程新知 2026/5/25 10:36:45

OpenAI与博通合作自研芯片，融资卡壳微软，AI军备赛进入信用背书阶段

OpenAI与Broadcom的合作及问题去年10月&#xff0c;OpenAI和Broadcom联合宣布战略合作&#xff0c;将共同部署10GW的定制AI加速器&#xff0c;OpenAI负责设计芯片和系统&#xff0c;Broadcom参与开发并负责部署&#xff0c;2026年下半年开始上架&#xff0c;2029年底前全部到位…...

编程新知 2026/5/25 10:09:26

2026年实用降AI率平台：亲测AI率从90%降至4%的省心方案

一、前言&#xff1a;2026年毕业必过AIGC检测门槛 2026年国内高校对学术论文的AIGC疑似度审核全面收紧&#xff0c;绝大多数院校都发布了明确的AIGC检测数值要求&#xff1a;985、211院校规定本科论文AI率需低于20%&#xff0c;硕士论文AI率不得高于15%&#xff0c;普通高校也普…...

编程新知 2026/5/25 9:51:37

告别AssetBundle！用Unity Addressables实现资源热更，我踩过的坑都帮你填平了

从AssetBundle到Addressables&#xff1a;Unity资源热更的现代化迁移指南第一次接触Unity Addressables时&#xff0c;我正被AssetBundle的各种问题折磨得焦头烂额。那是一个周五的深夜&#xff0c;项目即将上线&#xff0c;却因为AssetBundle的依赖关系混乱导致热更新失败。在…...

编程新知 2026/5/25 8:47:35

全局退火算法：用神经网络驱动蒙特卡洛，突破组合优化瓶颈

1. 全局退火算法&#xff1a;为什么我们需要一种新的优化范式&#xff1f;在组合优化和统计物理领域&#xff0c;我们经常面对一个看似简单、实则令人头疼的核心问题&#xff1a;如何在一个由无数个可能状态构成的、崎岖不平的“能量景观”中找到那个最低的谷底——也就是全局最…...

编程新知 2026/5/25 6:43:51

CVE-2025-48976：Apache Commons FileUpload 协议解析层内存崩溃漏洞深度解析

1. 这个漏洞不是“上传文件被黑了”&#xff0c;而是整个解析逻辑崩了Apache Commons FileUpload 是 Java 生态里最老牌、最被信任的文件上传处理库之一&#xff0c;从 2003 年发布第一个稳定版起&#xff0c;它就稳稳地嵌在 Struts2、Spring MVC&#xff08;早期&#xff09;、…...

编程新知 2026/5/25 6:03:41