你真知道HTML网页元素有多宽吗?

作者:张鑫

Web端对于宽度有各种定义,比如innerWidth,outerWidth,clientWidth,offsetWidth。不同语境下有不同的含义,PC端与移动端的表现也有不同,还可能与缩放水平、滚动条、viewport设置等因素相关。

经过一番试验与探索,得到成果整理如下,包括表格、示意图、演示页面,与大家分享。
关于元素尺寸
对于jQuery:

width(), innerWidth(), outerWidth()
你真知道元素有多宽?0
对于原生JS:

clientWidth, offsetWidth, scrollWidth

你真知道元素有多宽?1

clientWidth是内容除去滚动条后实际显示出来的宽度,scrollWidth是包括溢出部分的总宽度。

需要注意的是滚动条的宽度在不同浏览器下是不一样的。

演示页面:

jsbin.com/petuje/1/edit
关于页面尺寸
追根溯源,clientWidth、scrollWidth等概念源自CSS Object Model (CSSOM)标准对JS的扩展,具体可参见标准:

w3.org/TR/cssom-view/#

但是看标准解决不了所有疑惑,比如标准中说:

“The outerWidth attribute must return the width of the client window. If there is no client window this attribute must return zero.”

实际上,对于outerWidth,PC、安卓、iOS上的浏览器对其解释各不相同,我们要做的就是进行实验,找到这些差异并记录下来。

各种属性与影响因素关系总结如下表,1表示相关,0表示无关:

PC端:

你真知道元素有多宽?2移动端:iOS/Android

你真知道元素有多宽?3演示页面:

andreasbovens.github.io
andreasbovens.github.io (二维码自动识别)

当页面viewport设置为device-width时,PC端和手机端的具体表现如下:

<meta name=”viewport” content=”width=device-width”>

PC:
你真知道元素有多宽?4
Mobile iOS:

纵向:

你真知道元素有多宽?5
横向:
你真知道元素有多宽?6
读取宽度时,需要明确想要读取的是哪种宽度、这个宽度值受哪些因素影响、与哪些因素无关,这样才能写出适应性更强的代码。

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注