最近在做用户端客服对话系统,遇到一个很坑的事情--在oppo A53 5G安卓手机浏览器及webview上,底部position为fixed的输入框被手机软键盘给遮挡了,小米手机及iphone没有问题。下图分别为底部输入框被遮挡及底部输入框没有被遮挡的情况:
在网上找解决方案,说监听resize事件,然后将scrollTop设置为99999999。设置后无效,因此我尝试在触发resize事件后就alert一下观察原因,发现oppo A53 5G会触发两次resize事件(触发第一次resize事件会调起输入法,触发第二次resize事件前底部输入框没有被遮挡,但是触发后就被遮挡了),但是小米及iphone只会触发一次。有点怀疑是输入法的问题,因此将原有的“百度输入法定制版”换成“搜狗输入法”,切换后发现还是会触发两次resize事件。无奈,在我切换回“百度输入法定制版”时 无意间发现了手机上的这个设置(在其他设置>键盘与输入法>键盘位置>快捷切换输入法)
瞬间怀疑是这个设置导致的,因此把“抬高”关闭切换成“默认”,果然正常了!坑!
ps: 华为荣耀20(
Mozilla/5.0 (Linux; Android 10; LRA-AL00 Build/HONORLRA-AL00; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/88.0.4324.93 Mobile Safari/537.36
)的 百度输入法华为版也有类似的问题。总结经验:
1、遇到困难不放弃,多尝试,也许无意间你可能就会发现答案;
2、逐步排除法很重要;
3、前端出现问题,除了代码层面还要考虑到设置层面,比如手机设置层面,浏览器设置层面或输入法设置层面等;
4、有的手机功能设置较多,需要全局搜索看是否有相关设置;
5、手机有的设置没有完整及全面测试,这样会导致前端出问题;
题外话:
1、客服对话系统注意考虑到不能太短的心跳时间,因为用户可能切换到后台长时间选择文件上传。