移动端软键盘问题

判断H5 ios还是安卓:

navigator.userAgent.png

navigator.userAgent.toLowerCase().png

3.正则判断
isIos:
!!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) === true;

android 软键盘弹起或收起时,会改变window的高度,因此可以监听window的onresize事件;window.onsize()

ios 软键盘弹起特性:页面会整体上移,
输入框高度较小:


image.png
image.png

解决方案:
手动改变键盘收起和弹出输入框高度大小,会有键盘遮挡情况;手动让页面滚动到最底下。但是会有回弹抖动~

输入框高度较大:

image.png

image.png

解决方案:
window.scrollTo(0, div.scrollHeight)
手动让页面滚动到最底下。但是会有回弹抖动~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容