可视区域兼容性问题的思考及方法封装
今日在复习可视化尺寸获取时突发奇想，为什么要在怪异模式下使用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这一个类，它里面包含了六个默认…...
利用最小二乘法找圆心和半径
#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...
docker详细操作--未完待续
docker介绍 docker官网: Docker：加速容器应用程序开发 harbor官网：Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台，用于将应用程序及其依赖项（如库、运行时环…...
STM32F4基本定时器使用和原理详解
STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...
【Java_EE】Spring MVC
目录 Spring Web MVC 编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 编辑参数重命名 RequestParam 编辑编辑传递集合 RequestParam 传递JSON数据 编辑RequestBody …...
Java线上CPU飙高问题排查全指南
一、引言 在Java应用的线上运行环境中，CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时，通常会导致应用响应缓慢，甚至服务不可用，严重影响用户体验和业务运行。因此，掌握一套科学有效的CPU飙高问题排查方法&…...
C++.OpenGL （14/64）多光源（Multiple Lights）
多光源（Multiple Lights） 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...
【JavaSE】多线程基础学习笔记
多线程基础 -线程相关概念 程序（Program） 是为完成特定任务、用某种语言编写的一组指令的集合简单的说:就是我们写的代码 进程 进程是指运行中的程序，比如我们使用QQ，就启动了一个进程，操作系统就会为该进程分配内存…...
在 Spring Boot 项目里，MYSQL中json类型字段使用
前言： 因为程序特殊需求导致，需要mysql数据库存储json类型数据，因此记录一下使用流程 1.java实体中新增字段 private List<User> users 2.增加mybatis-plus注解 TableField(typeHandler FastjsonTypeHandler.class) private Lis…...
第八部分：阶段项目 6：构建 React 前端应用
现在，是时候将你学到的 React 基础知识付诸实践，构建一个简单的前端应用来模拟与后端 API 的交互了。在这个阶段，你可以先使用模拟数据，或者如果你的后端 API（阶段项目 5）已经搭建好，可以直接连…...
深入理解 React 样式方案
React 的样式方案较多，在应用开发初期，开发者需要根据项目业务具体情况选择对应样式方案。React 样式方案主要有： 1. 内联样式 2. module css 3. css in js 4. tailwind css 这些方案中，均有各自的优势和缺点。 1. 方案优劣势 1. 内联样式: 简单直观，适合动态样式和…...