bug 记录 - 安卓移动端高度使用 100vh 的坑

发现问题

  • H5 页面适配移动端,页面分上下两部分,上部分是纯图片,需要占满一屏。下半部分是 form 表单内容,需要占满一屏。效果如下图。
    在这里插入图片描述
  • 如果分别将 图片Box表单Box 的高度设置为 100%,由于高度的继承性,还需要将父元素、祖元素、祖祖元素的高度分别写死,层层继承下来,处理起来比较麻烦。

vh 与 vw

  • vh 是 css 中的一个相对长度单位(相对于视口高度),即如果手机屏幕可视区域高度如果为 1624px,那么 1vh 就是 16.24px。
  • 与 vh 对应的是 vw(视口宽度),如果手机屏幕可视区域的宽度为 750px,那么 1vw 就是 7.5px。
  • 使用 vh 和 vw 似乎可以解决 100% 高度继承的问题,但是页面中如果有表单元素就会出现问题。

再次发现问题

  • 使用 vh 时,在安卓手机上,如果存在表单元素(input、textarea),在获取光标,键盘抬起时,键盘的高度会占用窗口的高度,导致 vh 的值重新计算,页面被压扁。IOS 没有这个问题。
    在这里插入图片描述

解决办法

  • 摒弃 vh 用法,在页面加载完成后,获取屏幕高度,动态为 DOM 设置高度
this.$nextTick(() => {
   let docHeight = document.documentElement.clientHeight;
    console.log("可视区域高度", docHeight);
    this.docHeight = docHeight + "px";
    // 获取屏幕高度,为元素添加高度
    // 不使用 100vh 的原因:安卓手机上,键盘抬起会算作屏幕元素,100vh会发生变化,键盘收起时,100vh会比初始值小
});
<div  :style="{ height: docHeight }"> </div>

版权声明:本文为weixin_42154189原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。