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



作者：张鑫

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

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

width(), innerWidth(), outerWidth()

对于原生JS:

clientWidth, offsetWidth, scrollWidth

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

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

演示页面：

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

http://www.w3.org/TR/cssom-view/#refsCSSOM

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

“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端：

移动端：iOS/Android

演示页面：

http://andreasbovens.github.io/understanding-viewport/meta-widthdevicewidth.html
http://andreasbovens.github.io/understanding-viewport/meta-widthdevicewidth.html (二维码自动识别)

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

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

PC：

Mobile iOS：

纵向：

横向：

读取宽度时，需要明确想要读取的是哪种宽度、这个宽度值受哪些因素影响、与哪些因素无关，这样才能写出适应性更强的代码。