window与document的这些属性的值会不太兼容，会在后面补充说。
一下效果展示忽略IE9之前浏览器，主要考虑主流浏览器与手机端的效果。
- 可以获得宽度与高度的属性
-
clientHeight 与clientWidth 指元素的客户区大小，即 可见内容区+padding
#t1{
width: 100px;
height: 100px;
border: 4px solid yellowgreen;
background: yellow;
padding: 10px;
}
div.clientWidth+';'+div.clientHeight;
120=width(100)+padding(10)*2;
不加边框，当内容溢出或者出现滚动条时的宽度与高度都不会算在内。
是dom对象的可见宽度，这里的可见是针对设置overflow: scroll;后部分内容隐藏而说的。 -
offsetHeight与offsetWidth 是元素的外在大小，即 border +padding+可见内容区
div.offsetWidth+';'+div.offsetHeight
128 = width(100)+padding(10)2+border(4)2
上图内容区溢出隐藏，是因为设置了overflow: scroll;才会有这样的现象。 -
scrolWidth与scrollHeight是元素的实际大小，即 实际内容区+padding
div.scrollWidth+';'+div.scrollHeight
以上这三对属性都是针对dom元素的，可以测得元素的宽度，但是，细心的会发现，以上三种并没有提供获得width（100）的方法，所以可以使用window.getComputedStyle(div,null).getPropertyValue('width');
这样获得就是100。
其实比较难理解的是像window、document.body、document. documentElement这两个dom对象在获得他们的宽度时会有各种问题。
现在开始撕一下这其中的神奇。。。
-
document.body与document. documentElement
前者是body，后者是html。但是现在大家都习惯将元素默认的padding与margin设置为0，这样无论是通过以上两种谁去访问clientWidth都是一样的值（电脑端一致）。
但是手机端访问这两个值的时候会随着由于是客户端，我们会对网页的meta标签做一些设置，然后通过这两个对象访问的属性的值就不一样。但是由于body是html的子标签，所以获得可视窗口（clientWidth）的大小，建议使用后者document. documentElement.clientWidth。
document对象有个属性compatMode ,它有两个值：
BackCompat 对应quirks mode
CSS1Compat 对应strict mode
IE6以前的浏览器就是第一种渲染模式，导致IE6要是想获得可视窗口（clientWidth）时，必须使用document.body.clientWidth这个来访问。IE6我实习的公司已经放弃啦。
综上：抛弃document.body的用法，使用document. documentElement。
-
window.innerWidth与document. documentElement.clientWidth用哪个？
接下来说的是不为网页添加meta标签的效果，添加标签的我觉得应该另外写一篇，因为会涉及到自适应的知识。
我做了再安卓机浏览器，iPhone的safari浏览器以及这两种手机内微信内访问网页运行的qq浏览器的测试。
测试结果肯定是不统一的。
测试前提：不为页面设置固定的宽度，不设置meta标签。
测试结果：
| 属性 | 安卓机 | iphone |
|---|---|---|
| window.innerWidth | 980px | 980px |
| ..clientWidth | 980px | 980px |
| 属性 | 安卓机微信 | iphone微信 |
|---|---|---|
| window.innerWidth | 320px | 980px |
| ..clientWidth | 980px | 980px |
总是会有捣蛋鬼。。。
综上：如果想要获得手机端页面的可视宽度，建议使用
document. documentElement.clientWidth
在下一篇，笔记中，会对这个属性在meta标签的不同设置下的值进行分析。
BTW：我又回来，好好学习啦！
网友评论