微信 H5 页面兼容性问题总结-1

1、ios端兼容input光标高度

**问题详情描述：**input输入框光标，在安卓手机上显示没有问题，但是在苹果手机上

当点击输入的时候，光标的高度和父盒子的高度一样。例如下图，左图是正常所期待的输入框光标，右边是ios的input光标。

**出现原因分析：**通常我们习惯用height属性设置行间的高度和line-height属性设置行间的距离（行高），当点击输入的时候，光标的高度就自动和父盒子的高度一样了。（谷歌浏览器的设计原则，还有一种可能就是当没有内容的时候光标的高度等于input的line-height的值，当有内容时，光标从input的顶端到文字的底部

**解决办法：**高度height和行高line-height内容用padding撑开。

2、ios端微信h5页面上下滑动时卡顿、页面缺失

**问题详情描述：**在ios端，上下滑动页面时，如果页面高度超出了一屏，就会出现明显的卡顿，页面有部分内容显示不全的情况。

出现原因分析：

笼统说微信浏览器的内核，Android上面是使用自带的WebKit内核，iOS里面由于苹果的原因，使用了自带的Safari内核，Safari对于overflow-scrolling用了原生控件来实现。对于有-webkit-overflow-scrolling的网页，会创建一个UIScrollView，提供子layer给渲染模块使用。【有待考证】

**解决办法：**只需要在公共样式加入下面这行代码

*{
  -webkit-overflow-scrolling: touch;
}

But，这个属性是有bug的，比如如果你的页面中有设置了绝对定位的节点，那么该节点的显示会错乱，当然还有会有其他的一些bug。

3、ios键盘唤起，键盘收起以后页面不归位

问题详情描述：

输入内容，软键盘弹出，页面内容整体上移，但是键盘收起，页面内容不下滑

出现原因分析：

固定定位的元素在元素内 input 框聚焦的时候弹出的软键盘占位失去焦点的时候软键盘消失但是还是占位的导致input框不能再次输入在失去焦点的时候给一个事件

解决办法：

<div class="list-warp">   <div class="title"><span>投·被保险人姓名</span></div>   <div class="content">      <input class="content-input"      placeholder="请输入姓名"      v-model="peopleList.name"      @focus="changefocus()"      @blur.prevent="changeBlur()"/>       </div> </div>

changeBlur(){   let u = navigator.userAgent, app = navigator.appVersion;   let isIOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/);   if(isIOS){      setTimeout(() => {         const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0         window.scrollTo(0, Math.max(scrollHeight - 1, 0))      }, 200)   } }

拓展知识： position: fixed的元素在ios里，收起键盘的时候会被顶上去，特别是第三方键盘

4、安卓弹出的键盘遮盖文本框

问题详情描述：

安卓微信H5弹出软键盘后挡住input输入框

解决办法：给input和textarea标签添加focus事件，如下，先判断是不是安卓手机下的操作，当然，可以不用判断机型，Document 对象属性和方法，setTimeout延时0.5秒，因为调用安卓键盘有一点迟钝，导致如果不延时处理的话，滚动就失效了

changefocus(){   let u = navigator.userAgent, app = navigator.appVersion;   let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;   if(isAndroid){      setTimeout(function() {      document.activeElement.scrollIntoViewIfNeeded();      document.activeElement.scrollIntoView();      }, 500);   }}