移动端做一个吸底的输入框首先需要注意两大类设备,安卓和ios下的浏览器特别是在ios下,输入框聚焦时fixed定位会出现一些问题网上也有许多相关的帖子,在此就不再赘述了
今天要提及的是小米全面屏下的miui浏览器。
问题描述:吸底的input聚焦后弹出的软键盘将吸底的元素完全或者部分遮挡。
问题原因:当input聚焦后浏览器弹出软键盘,然后将元素移动到软键盘上方但全面屏下,miui浏览器少计算了浏览器自带的底部bar的高度然后导致元素被软鍵盘遮挡高度为bar的高度。
3.判断屏幕的宽高比当高度大于宽度的2倍时确定为全面屏。
5.当输入框聚焦后给输入框加上等于浏览器底部物理bar高度的margin-bottom。然后可以看到正常的输入框了而且不会被软键盘遮挡。
6.软键盘的高度变化会触发浏览器的resize事件第一次触发底部输入框聚焦时,记录变化后的window.innerHeight
7.由于软键盘有收回这种状态,此时软键盘依然存在但是高度缩小,同样会触发resize此时可以用window.innerHeight与4中记录的做比较,如果昰小于等于4中的高度而且大于5中记录的高度,那么可以将输入框的margin-bottom的增加值去掉并且将输入框blur。然后就不会露出很高的底部了
建议:在移动端最好不要做吸底的输入框,各个浏览器的实现差距很大