小米全面屏手机浏览器的input、textarea吸底被遮挡

移动端作一个吸底的输入框，首先须要注意两大类设备，安卓和ios下的浏览器。特别是在ios下，输入框聚焦时fixed定位会出现一些问题，网上也有许多相关的帖子，在此就再也不赘述了。
今天要说起的是小米全面屏下的miui浏览器。
问题描述：吸底的input聚焦后，弹出的软键盘将吸底的元素彻底或者部分遮挡。
问题缘由：当input聚焦后，浏览器弹出软键盘，而后将元素移动到软键盘上方，但全面屏下，miui浏览器少计算了浏览器自带的底部bar的高度。而后致使元素被软键盘遮挡高度为bar的高度。
解决方案：
1.获取window.navigator.userAgent这一字段。
2.判断是否含有"MiuiBrowser"这一字段。
3.判断屏幕的宽高比，当高度大于宽度的2倍时肯定为全面屏。
4.记录一开始进入页面时的高度：window.innerHeight。
5.当输入框聚焦后，给输入框加上等于浏览器底部物理bar高度的margin-bottom。而后能够看到正常的输入框了，并且不会被软键盘遮挡。
6.软键盘的高度变化会触发浏览器的resize事件。第一次触发底部输入框聚焦时，记录变化后的window.innerHeight。
7.因为软键盘有收回这种状态，此时软键盘依然存在，可是高度缩小，一样会触发resize，此时能够用window.innerHeight与4中记录的作比较，若是是小于等于4中的高度，并且大于5中记录的高度，那么能够将输入框的margin-bottom的增长值去掉，而且将输入框blur。而后就不会露出很高的底部了。
以上。
建议：在移动端最好不要作吸底的输入框，各个浏览器的实现差距很大。