移动端软键盘问题

2020-12-08  本文已影响0人  穆熙沐

判断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)
手动让页面滚动到最底下。但是会有回弹抖动~
上一篇 下一篇

猜你喜欢

热点阅读