前端 - 移动端浏览器的布局视口是docuent.documentElement.clientWidth/Height吗？

Question

在《移动web手册》中提到了一个布局视口的概念，布局视口的高度值是多少？和什么有关呢？
书中说

1. docuent.documentElement.clientWidth/Height可以获取到布局视口的宽度、高度值（P96）;

2. meta标签可以设置布局视口的宽度值（P83）;

3. 尺寸单位vw和vh是相对于布局视口的单位，而在Safari中有时则是与html元素相关（p112）;

4. 当触发touch事件时，changedTouches数组中第一个元素对象包含的pageX/Y是相对于布局视口的触摸坐标值（P149）。

我在iphone6进行了测试，设置了一个p高度为100vh,meta标签设置width=device-width,然后获取docuent.documentElement.clientHeight和docuent.body.clientHeight的值，通过jq的.height()读取p的高度值和html元素高度值：
在Safari中，分别为559px,628px,628px,628px；
在Chrome中，这两个值分别是591px,591px,591px,591px；
在Safari中，页面可以向下滚动一点，而在Chrome中，页面刚好一屏显示完全，无法向下滚动，发现Safari中vh单位貌似与docuent.documentElement.clientHeight无关而与html元素高度相等，那么它们是否相关呢？

然后我将meta标签取消，此时读数为：
Safari: 1461px,1640px,1640px,1640px
Chrome: 1545px,1545px,1545px,1545px
和设置了width=device-width时差不多，在Safari中，页面可以向下滚动一点，而在Chrome中，页面刚好一屏显式完全，无法向下滚动，发现Safari中vh单位貌似与docuent.documentElement.clientHeight无关。

于是我又增加了一个高度为300px的p，此时读数：
Safari:559px,928px,628px,928px
Chrome:591px,891px,591px,891px
可以发现，Safari中，vh单位与docuent.documentElement.clientHeight的值和html元素高度都不相关。
我觉得vh在Safari中应该是与缩小顶部地址栏和隐藏底部工具栏后的视口相关，在Chrome中则是与地址栏不缩小时的视口相关，这个视口尺寸是否就是布局视口呢？然而这个视口与docuent.documentElement.clientHeight的值明显是不一样的，因此我先称这个视口为vh视口吧。

虽然书中说meta标签的height指令暂时还没有获得支持，但是我还是测试了一下，我将meta中height设为600，此时
Safari：600px,628px,628px,628px；
Chrome: 600px,591px,591px,591px；
可以看到docuent.documentElement.clientHeight发生了变化，而p高度并没有响应这个变化。

接着我将页面高度增加，加入了一个500px高的p，再在页面底部放置了一个50px高的目标元素监听touchstart事件，touchstart事件触发时，获取changedTouches数组中的pageY值，此时各个读数是：
Safari: 559px,1178px,628px,1178px,pageY值在1129-1178之间
Chrome: 591px,1141px, 591px,1141px,pageY值在1090-1130之间
鉴于触摸无法获得精准的坐标值，我认为此时的度数虽有偏差但也算正常。
通过这组实验我认为changedTouches数组中的pageY值应该是与页面高度有关而与docuent.documentElement.clientHeight和vh视口尺寸都没有关系的。

然后，书中还说过，在Safari中，页面的滚动是通过布局视口的滚动来实现的（具体哪页忘记了），在149页绿框中也说“布局视口是可以滚动的”，如此说来，滚动的是布局视口，那么是不是说明布局视口将随着页面高度的变化而变化，否则怎么进行滚动呢？
如果布局视口高度是可变的，使用vh的元素尺寸也就随着页面高度的变化而改变了，事实并不是这样，页面的变化并不会带来使用vh单位的元素尺寸变化。
然而不管页面高度为多少，docuent.documentElement.clientHeight的值都是固定的559px（或591px），而docuent.body.clientHeight即body对象的高度值是变化的。

所以我的问题来了，布局视口的高度值到底是docuent.documentElement.clientHeight还是docuent.body.clientHeight，我看到很多人都说是docuent.documentElement.clientHeight，可这个值固定为551px（或者591px）,怎么会是一个页面的布局高度呢？我觉得docuent.body.clientHeight才是布局视口的高度，而docuent.documentElement.clientHeight是浏览器初始可见视口的高度。

另外不管布局视口是多少，vh单位都与布局视口无关，它应该与浏览器实现方式有关，在Safari中，vh是相对于缩小地址栏和工具栏后的可见视口相关，而Chrome则是以初始可用视口相关（因为Chrome在向下滚动时地址栏也是会隐藏的，vh并不是与这个视口相关）。所以我认为书中是错误的。至于这个视口，在书中是指哪个视口呢？明显不是视觉视口，因为在缩放时，p的高度值并不会发生变化，那么是理想视口？iPhone6的device-height是667px，因此，也不是理想视口。所以这个视口在书中并没有定义。

最后就是关于changedTouches数组中的pageY值，我认为它就是相对于页面的高度，也就是docuent.body.clientHeight。如果布局视口是docuent.body.clientHeight，那书中所述即正确的，而如果布局视口是docuent.documentElement.clientHeight，那书中所说出错了。

Answer 1

这叫viewport，请看这个答案http://stackoverflow.com/questions/1248081/get-the-browser-viewport-dimensions-with-javascript