微信h5页面前端开发的坑

1. ios端兼容input光标高度
   问题：input输入光标，在苹果手机上点击输入时，光标的高度会和父盒子的高度一样高
   分析： 平时习惯用height和line-height属性设置行高，当输入时，光标的高度就自动和父盒子的高度一样了
   解决办法：高度height和line-height内容用padding撑开

2. ios微信h5页面上下滑动时卡顿，页面缺失
   问题：如果页面高度超出了一屏，滑动页面就会出现卡顿，有时会有页面显示不全的情况
   分析：苹果微信浏览器内核使用了自带的safari，需要使用overflow-scrolling原生控件来实现，开启回弹效果
   解决办法：*{ -webkit-overflow-scrolling: touch }
   注意：如果页面中有设置了绝对定位的节点，那么该节点的显示会错乱，尽量避免

3. ios键盘唤起，键盘收起以后页面不归位
   问题： 输入内容时，键盘弹出，页面内容整体上移，但是键盘收起，页面内容不下滑
   分析：在input聚焦时，弹出的键盘占位，失去焦点时软键盘消失，但还是占位的，导致input框不能再次输入
   解决办法： 监听input的blur方法，失去焦点时，用js滚动页面

const u = window.navigator.userAgent
const isIos = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
if (isIos) {
    window.scroll(0, 0)
 }

4. 安卓弹出的键盘遮盖文本框
   问题：安卓微信h5页面太长时弹出软键盘后会挡住input输入框
   解决办法：给input和textarea标签添加focus事件，聚焦时延时滚动

setTimeout(() => {
  document.activeElement.scrollIntoViewNeeded()
   document.activeElement.scrollIntoView()
},  500)
``
扩展：
Element.scrollIntoView()方法让当前的元素滚动到浏览器窗口的可是区域内。
Element.scrollIntoViewIfNeed()方法也是用来将不在可视区域内的元素滚动到浏览器窗口的可视区域。但如果该元素已经在浏览器的可视区域，则不会发生滚动。
5. vue中路由使用hash模式，开发微信h5页面分享时在安卓上分享成功，但在ios中分享异常
问题： ios当前页面分享给好友，点进来正常，如果二次分享，则跳转到首页；使用vue router跳转到第二个页面在分享时，分享设置失败
解决方法：不用this.$router.push路由跳转，改为使用window.location.href去跳转