最近在维护一些老的页面，发现有一个解决安卓输入法软键盘导致页面布局异常的写法挺好的，跟大家分享一下
1. 背景
做过移动端开发的话，大家肯定都遇到过各种移动端的兼容问题，例如IOS的fixed问题，不同系统浏览器API的兼容问题等。今天我们要讨论的也是一个兼容性问题，当安卓h5页面里遇到输入框的时候，输入法弹出的时候，浏览器会调整布局，导致底部的UI被顶上来，具体如下图
输入法顶起底部内容这里页面的代码其实很简单，就是一个输入框，一个fixed或者absolute定位在底部的按钮
代码语言：javascript复制<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代码如下
代码语言：javascript复制@media (min-aspect-ratio: 13/20) {
.button {
display: none;
}
}通过媒体查询min-aspect-ratio 当屏幕的宽高比大于13/20的时候，就会自动隐藏内容
媒体查询隐藏内容
