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

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

news 2025/6/21 6:58:38

 今日在复习可视化尺寸获取时突发奇想，为什么要在怪异模式下使用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

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

编程新知 2025/6/15 22:22:18

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

编程新知 2025/6/17 10:29:06

在Mathematica中实现Newton-Raphson迭代的收敛时间算法（一般三次多项式）

考察一般的三次多项式&#xff0c;以r为参数&#xff1a; p[z_, r_] : z^3 (r - 1) z - r; roots[r_] : z /. Solve[p[z, r] 0, z]&#xff1b; 此多项式的根为&#xff1a; 尽管看起来这个多项式是特殊的&#xff0c;其实一般的三次多项式都是可以通过线性变换化为这个形式…...

编程新知 2025/6/17 1:43:18

iview框架主题色的应用

1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题&#xff0c;无需引入&#xff0c;直接可…...

编程新知 2025/6/20 15:33:20

VisualXML全新升级 | 新增数据库编辑功能

VisualXML是一个功能强大的网络总线设计工具&#xff0c;专注于简化汽车电子系统中复杂的网络数据设计操作。它支持多种主流总线网络格式的数据编辑&#xff08;如DBC、LDF、ARXML、HEX等&#xff09;&#xff0c;并能够基于Excel表格的方式生成和转换多种数据库文件。由此&…...

编程新知 2025/6/21 2:26:00

论文阅读：Matting by Generation

今天介绍一篇关于 matting 抠图的文章&#xff0c;抠图也算是计算机视觉里面非常经典的一个任务了。从早期的经典算法到如今的深度学习算法&#xff0c;已经有很多的工作和这个任务相关。这两年 diffusion 模型很火&#xff0c;大家又开始用 diffusion 模型做各种 CV 任务了&am…...

编程新知 2025/6/15 15:11:53

前端开发者常用网站

Can I use网站&#xff1a;一个查询网页技术兼容性的网站 一个查询网页技术兼容性的网站Can I use&#xff1a;Can I use... Support tables for HTML5, CSS3, etc (查询浏览器对HTML5的支持情况) 权威网站&#xff1a;MDN JavaScript权威网站&#xff1a;JavaScript | MDN...

编程新知 2025/6/20 15:17:25

Java数组Arrays操作全攻略

Arrays类的概述 Java中的Arrays类位于java.util包中&#xff0c;提供了一系列静态方法用于操作数组&#xff08;如排序、搜索、填充、比较等&#xff09;。这些方法适用于基本类型数组和对象数组。 常用成员方法及代码示例 排序&#xff08;sort&#xff09; 对数组进行升序…...

编程新知 2025/6/20 15:23:48

大数据驱动企业决策智能化的路径与实践

&#x1f4dd;个人主页&#x1f339;&#xff1a;慌ZHANG-CSDN博客 &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; 一、引言&#xff1a;数据驱动的企业竞争力重构 在这个瞬息万变的商业时代&#xff0c;“快者胜”的竞争逻辑愈发明显。企业如何在复杂环…...

编程新知 2025/6/17 13:09:51

Linux入门(十五)安装java安装tomcat安装dotnet安装mysql

安装java yum install java-17-openjdk-devel查找安装地址 update-alternatives --config java设置环境变量 vi /etc/profile #在文档后面追加 JAVA_HOME"通过查找安装地址命令显示的路径" #注意一定要加$PATH不然路径就只剩下新加的路径了&#xff0c;系统很多命…...

编程新知 2025/6/19 14:01:32