挪动端做一个吸底的输入框，起首须要注重两大类装备，安卓和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。然后就不会显露很高的底部了。
以上。
发起：在挪动端最好不要做吸底的输入框，各个浏览器的完成差异很大。