本文主要总结h5网页在ios不同版本上的表现及我的解决方案:
ios | 表现 | 解决方案 |
11.1 | 页面被顶起后回弹到底部没有触发scrollTop的改变,window.innerHeight没有改变,用户可以向上移动页面以获得输入框 | h5找不到方案解决,最终使用ios提供的方法获取到了键盘高度,使用定位固定到具体位置来解决 |
12.3.1 | 页面整体上移,软键盘自动对齐页面底部,切换输入法导致覆盖输入框 | 如不考虑用户体验可以不修改,优化切换输入法遮盖输入框方案:定时器 document.body.scrollTop = document.body.scrollHeight 实时修改滚动的高度,blur时关闭定时器 |
13.1.3 | 整体上移自动顶起input 失去焦点输入框消失且不能回落 切换键盘高度(不会导致可视区域改变) 消失或被遮盖 | 使用window.scroll(0,0)解决无法回落问题; 切换输入法遮盖解决 scrollIntoView |
其他版本 | 暂未测试 | scrollIntoViewIfNeeded、 scrollIntoView 、scrolltop 这三个方法基本都可以解决 |
Android | 页面可能上移,也可能不移动,但是会触发window.innHeight的变化,可视区域改变 | 可以通过初始的innerHeight 和 focus时候的innerHeight对比即可知道位置,但基本会自动顶起输入框 |
如果有朋友测试出其它版本的问题或者有更好的解决方案,欢迎指正