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

【字号: 日期:2022-06-17浏览:38作者:雯心

问题描述

在《移动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,1640pxChrome: 1545px,1545px,1545px,1545px和设置了width=device-width时差不多,在Safari中,页面可以向下滚动一点,而在Chrome中,页面刚好一屏显式完全,无法向下滚动,发现Safari中vh单位貌似与docuent.documentElement.clientHeight无关。

于是我又增加了一个高度为300px的p,此时读数:Safari:559px,928px,628px,928pxChrome: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,那书中所说出错了。

问题解答

回答1:

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

相关文章: