手机端做一个吸底输入框。首先需要注意两类设备，Android和ios下的浏览器。尤其是在ios下，输入框获得焦点时固定定位会出现一些问题。网上也有很多相关的帖子，这里不再赘述。今天要说的是小米全面屏下的miui浏览器。问题描述：吸底输入聚焦后，弹出的软键盘完全或部分遮挡吸底元素。问题原因：输入焦点时，浏览器弹出软键盘，然后将元素移动到软键盘上方，但全屏下，miui浏览器低估了浏览器自带的底栏高度.然后元素被软键盘挡住，高度就是bar的高度。解决方法：1.获取window.navigator.userAgent字段。2、判断是否包含“MiuiBrowser”字段。3.确定屏幕的纵横比。当高度大于宽度的两倍时，确定为全面屏。4.开始记录进入页面时的高度：window.innerHeight。5.当输入框获得焦点时，给输入框添加一个等于浏览器底部物理栏高度的margin-bottom。然后就可以看到正常的输入框了，不会被软键盘挡住。6、软键盘的高度变化会触发浏览器的resize事件。第一次触发底部输入框焦点时，记录变化的window.innerHeight。7、由于软键盘被收回，此时软键盘依然存在，只是高度降低了，也会触发resize。这时可以用window.innerHeight和4中记录的高度进行比较，如果小于等于4中记录的高度，大于5中记录的高度，那么margin增加的值-输入框底部可以去掉，输入框会变模糊。那么高底就不会暴露了。多于。建议：移动端最好不要做吸底输入框，因为各个浏览器的实现差异很大。
