解决Android软键盘弹起，页面挤压的问题

weixin_45849565

于 2024-11-27 17:44:15 发布

阅读量795

点赞数 17

文章标签：前端 javascript html5

本文链接：https://blog.youkuaiyun.com/weixin_45849565/article/details/144090777

版权

一、问题描述
在移动端h5页面，当页面中包含input、textarea输入框的时候，或者有调起软键盘的操作时，Android浏览器下打开的页面，可视窗口的高度改变，导致页面上的vh重新计算，页面被压扁。ios下的浏览器（safari）没有这个问题。

二、原因

在ios中，软键盘是叠在可视窗口上面的，也就是不影响可视窗口的大小。但是在Android中，软键盘是在窗口中，即占用窗口的面积。

三、解决方法

<template>
  <div ref="pageRef"class="page"
      ......
  </div>
</template>

mounted() {
  /* 解决软键盘弹起，页面挤压的问题 */
  const clientHeight = document.documentElement.clientHeight
  window.onresize = () => {
    this.$refs.pageRef.style.height = clientHeight + 'px'
  }
}

beforeDestroy() {
  window.onresize = null
}