在《移动web手册》中提到了一个布局视口的概念,布局视口的高度值是多少?和什么有关呢?
书中说
docuent.documentElement.clientWidth/Height
可以获取到布局视口的宽度、高度值(P96);
meta标签可以设置布局视口的宽度值(P83);
尺寸单位vw和vh是相对于布局视口的单位,而在Safari中有时则是与html元素相关(p112);
当触发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
,那书中所说出错了。
This is called viewport, please see this answer http://stackoverflow.com/questions/1248081/get-the-browser-viewport-dimensions-with-javascript