前端 - 移动端浏览器的布局视口是docuent.documentElement.clientWidth/Height吗?
大家讲道理
大家讲道理 2017-04-17 11:22:41
0
1
696

在《移动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.clientHeightdocuent.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,那书中所说出错了。

大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

reply all(1)
Peter_Zhu

This is called viewport, please see this answer http://stackoverflow.com/questions/1248081/get-the-browser-viewport-dimensions-with-javascript

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template