微信的下拉回弹和安卓键盘弹出遮挡输入框的处理

微信 iOS 客户端在 2017 年 3 月 1 日前逐步升级为 WKWebview 内核，替换之前的 UIWebview，两者差距就目前来说兼容性问题不大，但是不管哪个内核都有个让人头疼的地方，就是浏览器下拉回弹下面这段代码可以帮助在微信中禁用下拉回弹并且不影响类似 swiper 的滑动插件

function stopDrop() {
  var lastY //最后一次y坐标点
  $(document.body).on('touchstart', function (event) {
    lastY = event.originalEvent.changedTouches[0].clientY //点击屏幕时记录最后一次Y度坐标。
  })
  $(document.body).on('touchmove', function (event) {
    var y = event.originalEvent.changedTouches[0].clientY
    var st = $(this).scrollTop() //滚动条高度
    if (y >= lastY && st <= 10) {
      //如果滚动条高度小于0，可以理解为到顶了，且是下拉情况下，阻止touchmove事件。
      astY = y
      event.preventDefault()
    }
    lastY = y
  })
}
stopDrop()

最好在 dom 渲染完成之后再执行哦~ 对于安卓微信浏览器来说，有一个比较痛的地方就是调出键盘会遮挡输入框，不会像 ios 那样整个页面往上移，那么久用$(window).resize 来写一个能够让他上移的方法就好了

var winHeight = $(window).height() //获取当前页面高度
$(window).resize(function () {
  var thisHeight = $(this).height()
  if (winHeight - thisHeight > 50) {
    $('body').css('height', winHeight + 'px')
  } else {
    $('body').css('height', '100%')
  }
})

1 月 8 日补充今天发现一个麻烦的问题，ios 上的 a 标签，还有我的 swiper 在点击的时候背景颜色特别奇怪，尝试写

a,
a:focus,
a:active,
a:hover,
a:visited {
  -background-color: rgba(0, 0, 0, 0);
}

无果，然后想到这是在 ios 和 chrome 才会有的，查了下手册，找到了如下属性：

*,
*:focus,
*:active,
*:hover,
*:visited {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
}

这样就彻底解决了