共计 696 个字符，预计需要花费 2 分钟才能阅读完成。
移动端做一个吸底的输入框，首先需要注意两大类设备，安卓和 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。然后就不会露出很高的底部了。以上。建议：在移动端最好不要做吸底的输入框，各个浏览器的实现差距很大。