可视区域兼容性问题的思考及方法封装
今日在复习可视化尺寸获取时突发奇想，为什么要在怪异模式下使用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}}
}
相关文章：
可视区域兼容性问题的思考及方法封装
今日在复习可视化尺寸获取时突发奇想，为什么要在怪异模式下使用document.body.clientWidth，在标准模式下使用document.documentElement.clientWidth？以及是否在IE8及以下的版本中其中一个获取方式将返回undefined或0。 出于该问题的思考&am…...
安全工具 | CMSeeK [指纹识别]
0x00 免责声明 本文仅限于学习讨论与技术知识的分享，不得违反当地国家的法律法规。对于传播、利用文章中提供的信息而造成的任何直接或者间接的后果及损失，均由使用者本人负责，本文作者不为此承担任何责任，一旦造成后果请自行承担…...
Android新logcat使用技巧
Android新logcat使用技巧 logcat新UI出现后，我常困惑于怎么过滤log，和以前的UI差异比较大，新UI界面结构如下： 这个新的 logcat 的问题是如何过滤信息并不是很明显。 获取应用的日志信息 要获取我们当前调试应用的日志信息&…...
使用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 目标依…...
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…...
SolVES模型生态系统服务功能社会价值评估
查看原文>>>SolVES 模型生态系统服务功能社会价值评估（基于多源环境QGIS、PostgreSQL、ArcGIS、Maxent、R语言） 目录 第一章、理论基础与研究热点 第二章、SolVES 4.0 模型运行环境配置 第三章、SolVES 4.0 模型运行 第四章、数据获取与入…...
Godot引擎 4.0 文档 - 入门介绍 - 学习新功能
本文为Google Translate英译中结果，DrGraph在此基础上加了一些校正。英文原版页面： Learning new features — Godot Engine (stable) documentation in English 学习新功能 Godot 是一个功能丰富的游戏引擎。有很多关于它的知识。本页介绍了如何使用…...
如何进行MySQL漏洞扫描
MySQL是一款广泛使用的关系型数据库管理系统，但由于其复杂的结构和功能，也存在不少安全漏洞，容易被黑客攻击。为了解决这些安全问题，进行MySQL漏洞扫描是必要的。那么MySQL怎么进行漏洞扫描?如何进行漏洞扫描?接下来就让小编带大…...
C语言函数大全-- x 开头的函数（3）
C语言函数大全 本篇介绍C语言函数大全-- x 开头的函数 1. xdr_opaque 1.1 函数说明 函数声明函数功能bool_t xdr_opaque(XDR *xdrs, char *buf, u_int len);用于编码或解码任意长度的二进制数据 参数： xdrs ： 指向 XDR 数据结构的指针，表…...
计算机图形学-GAMES101-12阴影
Shadow mapping 问题的提出 我们之前在进行着色时，对于每个物体仅考虑自己，而不考虑其他物体对它的影响。限定在光栅化中，如何解决阴影问题呢？阴影能被摄像机看到，但不能被光源所照亮。经典的Shadow mapping只能处理…...
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:#…...
探索Vue的组件世界-组件复用
目录 Mixin【混入】 缺陷 HOC（higher order component）【高阶组件】 相比较Mixin的优点： 不足： Renderless组件【函数式组件，无渲染组件，Vue社区使用比较多的一种业务复用模式】 优点： M…...
OMA通道-2
1 简介 本文档中指定的 API 使移动应用程序能够访问移动设备中的不同 SE，例如 SIM 或嵌入式 SE。 本规范提供了接口定义和 UML 图，以允许在各种移动平台和不同的编程语言中实现。 如果编程语言支持命名空间，则它应为 org.simalliance.openmob…...
SAP 用CO13冲销工序报工，但是没有产生货物移动（TCODE:CO1P 、 SE38 :CORUPROC，CORUAFWP）
前言 通常情况下，对PPO做GI或GR的时候，出现的异常可以在COGI中间被列出；在这些数据进入COGI之前，系统会把这些数据记录在CO1P中；换句话说，系统有时会出现DB的更新延时，当延时发生的时候…...
信息收集-服务器信息
服务器上面可以运行大量的系统服务和第三方应用服务，如果操作系统或者第三方软件没有及时升级打补丁，攻击者就有可能直接通过服务器上运行的服务进行攻击。 服务器需要收集的信息包含三个方面： 操作系统信息等识别waf（Web应用程…...
连续签到积分兑换试用流量主小程序开发
每日签到积分兑换试用流量主小程序开发 打卡兑奖小程序。用户签到活得积分。积分可以兑换商品。观看激励视频广告可以积分翻倍。 用户可以参加试用商品活动参加试用需要提交信息。可以通过分享方式直接获取试用资格。 以下是流量主小程序的功能列表： 广告位管理&a…...
C语言—自定义类型（结构体、枚举、联合）
自定义类型 结构体结构体的声明特殊的声明结构的自引用结构体变量的定义和初始化结构体内存对齐修改默认对齐数offsetof宏 结构体传参 位段位段的定义（声明）位段的内存分配位段的跨平台问题位段的应用 枚举枚举类型的定义及使用枚举的优点 联合ÿ…...
Node.js博客项目开发思路笔记
博客项目介绍 1. 目标 开发一个博客系统，具备博客基本功能只开发 server 端，不关心前端 2. 需求 首页、作者页、博客详情页登陆页管理中心、新建页、编辑页 3. 技术方案 数据如何存储 博客 idtitlecontentcreatetimeauthor1标题 1内容 11111112z…...
python 之 shutil 文件的复制、删除、移动文件以及目录，并支持文件的归档、压缩和解压
一、shutil shutil 模块于文件和文件集合的高级操作，包括：复制、删除、移动文件以及目录，并支持文件的归档、压缩和解压等 二、使用例子 复制文件及权限 shutil.copy(src, dst)复制文件及权限；src 和 dst 文件路径。dst 文件名或…...
jface
JFace 是建立在 SWT 之上的 UI 部件，它是 SWT 的扩展并能和SWT交互。 ApplicationWindow和Action org.eclipse.jface.window.ApplicationWindow; JFace为了简化窗口的设计特别设计了类，比如ApplicationWindow这一个类，它里面包含了六个默认…...
DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径
目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...
IP如何挑？2025年海外专线IP如何购买？
你花了时间和预算买了IP，结果IP质量不佳，项目效率低下不说，还可能带来莫名的网络问题，是不是太闹心了？尤其是在面对海外专线IP时，到底怎么才能买到适合自己的呢？所以，挑IP绝对是个技…...
基于SpringBoot在线拍卖系统的设计和实现
摘 要 随着社会的发展，社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统，主要的模块包括管理员；首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...
AirSim/Cosys-AirSim 游戏开发（四）外部固定位置监控相机
这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机，因为在使用过程中发现 Airsim 对外部监控相机的描述模糊，而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置，最后在源码示例中找到了，所以感…...
PostgreSQL——环境搭建
一、Linux # 安装 PostgreSQL 15 仓库 sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-$(rpm -E %{rhel})-x86_64/pgdg-redhat-repo-latest.noarch.rpm# 安装之前先确认是否已经存在PostgreSQL rpm -qa | grep postgres# 如果存在࿰…...
MacOS下Homebrew国内镜像加速指南（2025最新国内镜像加速）
macos brew国内镜像加速方法 brew install 加速formula.jws.json下载慢加速 🍺 最新版brew安装慢到怀疑人生？别怕，教你轻松起飞！ 最近Homebrew更新至最新版，每次执行 brew 命令时都会自动从官方地址 https://formulae.…...
2025年低延迟业务DDoS防护全攻略：高可用架构与实战方案
一、延迟敏感行业面临的DDoS攻击新挑战 2025年，金融交易、实时竞技游戏、工业物联网等低延迟业务成为DDoS攻击的首要目标。攻击呈现三大特征： AI驱动的自适应攻击：攻击流量模拟真实用户行为，差异率低至0.5%，传统规则引…...
在Spring Boot中集成RabbitMQ的完整指南
前言 在现代微服务架构中，消息队列（Message Queue）是实现异步通信、解耦系统组件的重要工具。RabbitMQ 是一个流行的消息中间件，支持多种消息协议，具有高可靠性和可扩展性。 本博客将详细介绍如何在 Spring Boot 项目…...
Pandas 可视化集成：数据科学家的高效绘图指南
为什么选择 Pandas 进行数据可视化？ 在数据科学和分析领域，可视化是理解数据、发现模式和传达见解的关键步骤。Python 生态系统提供了多种可视化工具，如 Matplotlib、Seaborn、Plotly 等，但 Pandas 内置的可视化功能因其与数据结…...
2025 后端自学UNIAPP【项目实战：旅游项目】7、景点详情页面【完结】
1、获取景点详情的请求【my_api.js】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口（适配服务端返回 Token） export const login async (code, avatar) > {const res await http(/login/getWXSessionKey, {code,avatar}); };//…...