小米手机浏览器的input、textarea底被遮挡

问题描述

在部分小米的手机浏览器中,input/textarea 聚焦后,弹出输入键盘,会遮挡页面底部input元素显示;
一般来说,最简单的处理方案在最外层加一个margin-bottom,就不会音响正常使用,但因项目需要一屏幕展示 或者底部刚好有重要元素fixed, 就会音响正常使用.
最近刚好遇到,因为项目需要类聊天会话页面,采用flex布局;input正好在底部.

问题分析

因为各家厂商浏览器在输入计算浏览器的高度不同,在所难免有坑;miui浏览器少计算了浏览器自带的底部bar的高度。然后导致元素被软键盘遮挡高度为bar的高度(老老实实等厂商更新修复就好啦)

解决思路

1. 正常思路 记录window.innerHeight ,对比input失获焦 的高度 作出相应调整(但是总有一类不能完美解决)
2. 只能针对特定 ua 进行特定处理;小米浏览器就需要这种处理方式
   • 获取window.navigator.userAgent这一字段。
   • 判断断是否含有"MiuiBrowser"(加上版本号,问题总要修复,不然修复)
   • 在input 元素focus的时候加上 一个底部高度(padding/margin/height 都行)
   • 在input 元素blur 移除 底部高度