可视区域兼容性问题的思考及方法封装
今日在复习可视化尺寸获取时突发奇想，为什么要在怪异模式下使用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这一个类，它里面包含了六个默认…...
Admin.Net中的消息通信SignalR解释
定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...
使用van-uploader 的UI组件，结合vue2如何实现图片上传组件的封装
以下是基于 vant-ui（适配 Vue2 版本 ）实现截图中照片上传预览、删除功能，并封装成可复用组件的完整代码，包含样式和逻辑实现，可直接在 Vue2 项目中使用： 1. 封装的图片上传组件 ImageUploader.vue <te…...
HBuilderX安装（uni-app和小程序开发）
下载HBuilderX 访问官方网站：https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本： Windows版（推荐下载标准版） Windows系统安装步骤 运行安装程序： 双击下载的.exe安装文件 如果出现安全提示&…...
CMake控制VS2022项目文件分组
我们可以通过 CMake 控制源文件的组织结构，使它们在 VS 解决方案资源管理器中以“组”（Filter）的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总（共4种） 方法描述是否推荐…...
解析奥地利 XARION激光超声检测系统：无膜光学麦克风 + 无耦合剂的技术协同优势及多元应用
在工业制造领域，无损检测（NDT)的精度与效率直接影响产品质量与生产安全。奥地利 XARION开发的激光超声精密检测系统，以非接触式光学麦克风技术为核心，打破传统检测瓶颈，为半导体、航空航天、汽车制造等行业提供了高灵敏…...
掌握 HTTP 请求：理解 cURL GET 语法
cURL 是一个强大的命令行工具，用于发送 HTTP 请求和与 Web 服务器交互。在 Web 开发和测试中，cURL 经常用于发送 GET 请求来获取服务器资源。本文将详细介绍 cURL GET 请求的语法和使用方法。 一、cURL 基本概念 cURL 是 "Client URL" 的缩写…...
HTML前端开发：JavaScript 获取元素方法详解
作为前端开发者，高效获取 DOM 元素是必备技能。以下是 JS 中核心的获取元素方法，分为两大系列： 一、getElementBy... 系列 传统方法，直接通过 DOM 接口访问，返回动态集合（元素变化会实时更新）。…...
【FTP】ftp文件传输会丢包吗？批量几百个文件传输，有一些文件没有传输完整，如何解决？
FTP（File Transfer Protocol）本身是一个基于 TCP 的协议，理论上不会丢包。但 FTP 文件传输过程中仍可能出现文件不完整、丢失或损坏的情况，主要原因包括： ✅ 一、FTP传输可能“丢包”或文件不完整的原因 原因描述网络…...
人工智能 - 在Dify、Coze、n8n、FastGPT和RAGFlow之间做出技术选型
在Dify、Coze、n8n、FastGPT和RAGFlow之间做出技术选型。这些平台各有侧重，适用场景差异显著。下面我将从核心功能定位、典型应用场景、真实体验痛点、选型决策关键点进行拆解，并提供具体场景下的推荐方案。 一、核心功能定位速览 平台核心定位技术栈亮…...
Vue3中的computer和watch
computed的写法 在页面中 <div>{{ calcNumber }}</div>script中 写法1 常用 import { computed, ref } from vue; let price ref(100);const priceAdd () > { //函数方法 price 1price.value ; }//计算属性 let calcNumber computed(() > {return ${p…...