微信H5页面兼容性解决方案 (2).docx

【H5】344-微信H5页面兼容性解决方案
 
   
 
 
 
 
 
 
 
     
 
 
 
 
 
1、ios端兼容input光标高度
问题详情描述：input输入框光标，在安卓手机-overflow-scrolling的网页，会创建一个UIScrollView，提供子layer给渲染模块使用。【有待考证】
解决办法：只需要在公共样式加入下面这行代码
*{
-webkit-overflow-scrolling: touch;
}
But，这个属性是有bug的，比如如果你的页面中有设置了绝对定位的节点，那么该节点的显示会错乱，当然还有会有其他的一些bug。
拓展知识： -webkit-overflow-scrolling:touch是什么？
MDN上是这样定义的：
-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果. auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。 touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。
3、ios键盘唤起，键盘收起以后页面不归位
问题详情描述：
输入内容，软键盘弹出，页面内容整体上移，但是键盘收起，页面内容不下滑
出现原因分析：
固定定位的元素 在元素内 input 框聚焦的时候 弹出的软键盘占位 失去焦点的时候软键盘消失 但是还是占位的 导致input框不能再次输入 在失去焦点的时候给一个事件
解决办法：
<div class="list-warp">
<div class="title"><span>投·被保险人姓名</span></div>
<div class="content">
<input class="content-input"
placeholder="请输入姓名"
v-model=""
***@focus="changefocus()"
***@="changeBlur()"/>
</div>
</div>
changeBlur(){
let u = , app = ;
let isIOS = !!(/(i[^;]+;( U;)? CPU.+Mac OS X/);
if(isIOS){
setTimeout(() => {
const scrollHeight = || || 0
(0, (scrollHeight - 1, 0))
}, 200)
}
}
拓展知识： position: fixed的元素在ios