H5安卓软键盘弹出把底部内容顶上去处理

最新推荐文章于 2024-03-08 14:38:53 发布

前端抠脚

最新推荐文章于 2024-03-08 14:38:53 发布

阅读量1.2k

点赞数

分类专栏：兼容 form vue

本文链接：https://blog.csdn.net/weixin_40404336/article/details/104940686

版权

本文介绍了H5页面在安卓设备上遇到软键盘弹出导致底部内容被挤压的处理方法。通过监听窗口尺寸变化，动态调整body和html的高度，确保内容在软键盘收起时能完全显示。

摘要由CSDN通过智能技术生成

H5安卓软键盘弹出把底部内容顶上去处理

解决方案就是，监听窗口变化，如果窗口变小就将 body html 高度变大使得内容能够全部展示出来，在窗口变回原来大小的时候body,html高度应该要还原，直接上代码如下

<template>
  <div class="dedicatedLine-box" refs="dedicatedLine">
    <div class="headers-box">
      <!-- <div class="top-box"></div> -->
      <div class="headers" flex="cross:center">
        <div class="L" @click="goback" flex="cross:center main:right">
          <div class="arrows"></div>
        </div>
        <div class="title">专线定制</div>
        <div class="R"></div>
      </div>
    </div>

    <div class="content-box">
      <div class="content">
        <div class="dot-box" flex="main:justify cross:center">
          <div class="dot-item"></div>
          <div class="dot-item"></div>
          <div class="dot-item"></div>
          <div class="dot-item"></div>
          <div class="dot-item"></div>
          <div class="dot-item"></div>
          <div class="dot-item"></div>
          <div class="dot-item"></div>
          <div class="dot-item"></div>
          <div class="dot-item"></div>
          <div class="dot-item"></div>
          <div class="dot-item"></div>
          <div class="dot-item"></div>
          <div class="dot-item"></div>
          <div class="dot-item"></div>
          <div class="dot-item"></div>
          <div class="dot-item"></div>
        </div>
        <div class="items" flex="cross:center">