微信浏览器H5开发常见的坑

ios端兼容input光标高度

问题详情描述：

出现原因分析：

解决办法：

.content {
  float: left;
  box-sizing: border-box;
  height: 88px;
  width: calc(100% - 240px);
  .content-input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    color: #333333;
    font-size: 28px;
    //line-height: 88px;
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

ios端上下滑动时卡顿、页面缺失

问题详情描述：

出现原因分析：

解决办法：

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

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

拓展知识：

-webkit-overflow-scrolling:touch是什么？

ios键盘唤起后收起页面不归位

问题详情描述：

出现原因分析：

解决办法：

<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)
  }
}

拓展知识：

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

问题详情描述：

出现原因分析：

解决办法：

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);
  }
},

拓展知识：

 

问题详情描述：

出现原因分析：

解决办法：

   

总结

    欢迎关注公众号，进一步技术交流：