安卓H5页面软键盘顶起页面底部

原创

easonxie

发布于 2023-04-18 15:35:23

3K1

发布于 2023-04-18 15:35:23

文章被收录于专栏：少年郎编程之路少年郎编程之路

最近在维护一些老的页面，发现有一个解决安卓输入法软键盘导致页面布局异常的写法挺好的，跟大家分享一下

1. 背景

做过移动端开发的话，大家肯定都遇到过各种移动端的兼容问题，例如IOS的fixed问题，不同系统浏览器API的兼容问题等。今天我们要讨论的也是一个兼容性问题，当安卓h5页面里遇到输入框的时候，输入法弹出的时候，浏览器会调整布局，导致底部的UI被顶上来，具体如下图

这里页面的代码其实很简单，就是一个输入框，一个fixed或者absolute定位在底部的按钮

<template>
  <input type="text" class="input" placeholder="我是输入框, 安卓聚焦，底部按钮会顶上来"/>
  <div class="button">按钮</div>
</template>

<style scoped>
.input {
  margin-top: 40px;
  color: #888;
  background-color: #fff;
  height: 40px;
  width: 88vw;
  padding-left: 15px;
  -webkit-appearance: none;
  border: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.button {
  position: fixed;
  background-color: blue;
  color: white;
  bottom: 2.5vw;
  padding: 0 4.26666667vw;
  width: 80vw;
  text-align: center;
  height: 40px;
  line-height: 40px;
  border-radius: 15px;
}
</style>

2. 解决方案

网上有不少解决这个问题的办法，大致的思路就是通过JS监听高度的改变，来确定输入法是不是弹出了，然后对不希望展示的内容做特殊的处理。例如这篇文章就写得很好移动端那些戳中你痛点的软键盘问题及解决方法 - 掘金 (juejin.cn)

但是其实有更简单的办法可以解决，通过媒体查询可以纯CSS就解决这个问题。添加CSS代码如下

@media (min-aspect-ratio: 13/20) {
  .button {
    display: none;
  }
}

通过媒体查询min-aspect-ratio 当屏幕的宽高比大于13/20的时候，就会自动隐藏内容

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

css

android

h5页面

兼容性

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

登录后参与评论

0 条评论

热度