作者：codercao

鏈接：https://juejin.im/post/5d47d2eff265da03f77e4e3a

最近給公司微信公眾號，寫(xiě)了微信h5業(yè)務(wù)頁(yè)面，總結分享一下前端開(kāi)發(fā)過(guò)程中的幾個(gè)兼容性坑，項目直接拿的公司頁(yè)面，所以下文涉及圖片都模糊處理了。

1、ios端兼容input光標高度

問(wèn)題詳情描述：input輸入框光標，在安卓手機上顯示沒(méi)有問(wèn)題，但是在蘋(píng)果手機上

當點(diǎn)擊輸入的時(shí)候，光標的高度和父盒子的高度一樣。例如下圖，左圖是正常所期待的輸入框光標，右邊是ios的input光標。

出現原因分析：通常我們習慣用height屬性設置行間的高度和line-height屬性設置行間的距離（行高），當點(diǎn)擊輸入的時(shí)候，光標的高度就自動(dòng)和父盒子的高度一樣了。（谷歌瀏覽器的設計原則，還有一種可能就是當沒(méi)有內容的時(shí)候光標的高度等于input的line-height的值，當有內容時(shí)，光標從input的頂端到文字的底部

解決辦法：高度height和行高line-height內容用padding撐開(kāi)

例如：

            .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;
              }
             }

2、ios端微信h5頁(yè)面上下滑動(dòng)時(shí)卡頓、頁(yè)面缺失

問(wèn)題詳情描述：在ios端，上下滑動(dòng)頁(yè)面時(shí)，如果頁(yè)面高度超出了一屏，就會(huì )出現明顯的卡頓，頁(yè)面有部分內容顯示不全的情況，例如下圖，右圖是正常頁(yè)面，邊是ios上下滑動(dòng)后，卡頓導致如左圖下面部分丟失。

出現原因分析：

籠統說(shuō)微信瀏覽器的內核，Android上面是使用自帶的WebKit內核，iOS里面由于蘋(píng)果的原因，使用了自帶的Safari內核，Safari對于overflow-scrolling用了原生控件來(lái)實(shí)現。對于有-webkit-overflow-scrolling的網(wǎng)頁(yè)，會(huì )創(chuàng )建一個(gè)UIScrollView，提供子layer給渲染模塊使用?！居写甲C】

解決辦法：只需要在公共樣式加入下面這行代碼

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

But，這個(gè)屬性是有bug的，比如如果你的頁(yè)面中有設置了絕對定位的節點(diǎn)，那么該節點(diǎn)的顯示會(huì )錯亂，當然還有會(huì )有其他的一些bug。

拓展知識： -webkit-overflow-scrolling:touch是什么？

MDN上是這樣定義的：

-webkit-overflow-scrolling 屬性控制元素在移動(dòng)設備上是否使用滾動(dòng)回彈效果.
auto: 使用普通滾動(dòng), 當手指從觸摸屏上移開(kāi)，滾動(dòng)會(huì )立即停止。
touch: 使用具有回彈效果的滾動(dòng), 當手指從觸摸屏上移開(kāi)，內容會(huì )繼續保持一段時(shí)間的滾動(dòng)效果。繼續滾動(dòng)的速度和持續的時(shí)間和滾動(dòng)手勢的強烈程度成正比。同時(shí)也會(huì )創(chuàng )建一個(gè)新的堆棧上下文。

3、ios鍵盤(pán)喚起，鍵盤(pán)收起以后頁(yè)面不歸位

問(wèn)題詳情描述：

 輸入內容，軟鍵盤(pán)彈出，頁(yè)面內容整體上移，但是鍵盤(pán)收起，頁(yè)面內容不下滑

出現原因分析：

固定定位的元素 在元素內 input 框聚焦的時(shí)候 彈出的軟鍵盤(pán)占位 失去焦點(diǎn)的時(shí)候軟鍵盤(pán)消失 但是還是占位的 導致input框不能再次輸入 在失去焦點(diǎn)的時(shí)候給一個(gè)事件

解決辦法：

<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里，收起鍵盤(pán)的時(shí)候會(huì )被頂上去，特別是第三方鍵盤(pán)

4、安卓彈出的鍵盤(pán)遮蓋文本框

問(wèn)題詳情描述：

安卓微信H5彈出軟鍵盤(pán)后擋住input輸入框，如下左圖是期待喚起鍵盤(pán)的時(shí)候樣子，右邊是實(shí)際喚起鍵盤(pán)的樣子

出現原因分析：待補充

解決辦法：給input和textarea標簽添加focus事件，如下，先判斷是不是安卓手機下的操作，當然，可以不用判斷機型，Document 對象屬性和方法，setTimeout延時(shí)0.5秒，因為調用安卓鍵盤(pán)有一點(diǎn)遲鈍，導致如果不延時(shí)處理的話(huà)，滾動(dòng)就失效了

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

拓展知識：

Element.scrollIntoView()方法讓當前的元素滾動(dòng)到瀏覽器窗口的可視區域內。而Element.scrollIntoViewIfNeeded()方法也是用來(lái)將不在瀏覽器窗口的可見(jiàn)區域內的元素滾動(dòng)到瀏覽器窗口的可見(jiàn)區域。但如果該元素已經(jīng)在瀏覽器窗口的可見(jiàn)區域內，則不會(huì )發(fā)生滾動(dòng)

5、Vue中路由使用hash模式，開(kāi)發(fā)微信H5頁(yè)面分享時(shí)在安卓上設置分享成功，但是ios的分享異常

問(wèn)題詳情描述：

ios當前頁(yè)面分享給好友，點(diǎn)擊進(jìn)來(lái)是正常，如果二次分享，則跳轉到首頁(yè)；使用vue router跳轉到第二個(gè)頁(yè)面后在分享時(shí)，分享設置失??；以上安卓分享都是正常

出現原因分析：jssdk是后端進(jìn)行簽署，前端校驗，但是有時(shí)跨域，ios是分享以后會(huì )自動(dòng)帶上 from=singlemessage&isappinstalled=0 以及其他參數，分享朋友圈參數還不一樣，貌似系統不一樣參數也不一樣，但是每次獲取url并不能獲取后面這些參數

解決辦法：

(1)可以使用改頁(yè)面this.$router.push跳轉，為window.location.href去跳轉，而不使用路由跳轉，這樣可以使地址欄的地址與當前頁(yè)的地址一樣，可以分享成功（適合分享的頁(yè)面不多的情況下，作為一個(gè)單單頁(yè)運用，這樣刷新頁(yè)面跳轉，還是..）

（2）把入口地址保存在本地，等需要獲取簽名的時(shí)候 取出來(lái)，注意：sessionStorage.setItem(‘href’,href); 只在剛進(jìn)入單應用的時(shí)候保存！【該方法未驗證】

題外話(huà)：

如果能用小程序寫(xiě)的頁(yè)面，盡量上小程序吧，H5開(kāi)發(fā)在微信開(kāi)發(fā)者工具里看頁(yè)面效果可能看不出問(wèn)題，因為不能喚起軟鍵盤(pán)。避免頻繁線(xiàn)上發(fā)布，可以用花生殼或者idcfengye，做內網(wǎng)穿透，搭建一個(gè)可以通過(guò)域名訪(fǎng)問(wèn)的開(kāi)發(fā)環(huán)境的h5頁(yè)面，在手機上看看效果，對了微信內置瀏覽器緩存機制。會(huì )導致剛提交的代碼（特別是js）效果要半個(gè)小時(shí)左右才生效。

最后：

微信H5頁(yè)面其實(shí)很多知識，登陸授權，jssdk授權，這里就只做了分享，當然還有上傳圖片、微信支付等功能，都可能會(huì )遇到坑，以上幾個(gè)坑也是比較常遇到的，如果有更好的解決方案的話(huà)，歡迎在留言區分享