微信 H5 頁面前端開發，大多數人都會遇到的幾個兼容性坑
最近給公司微信公衆號，寫了微信 h5 業務頁面，總結分享一下前端開發過程中的幾個兼容性坑，項目直接拿的公司頁面，所以下文涉及圖片都模糊處理了。
1、ios 端兼容 input 光標高度
問題詳情描述：input 輸入框光標，在安卓手機上顯示沒有問題，但是在蘋果手機上
當點擊輸入的時候，光標的高度和父盒子的高度一樣。例如下圖，左圖是正常所期待的輸入框光標，右邊是 ios 的 input 光標。
出現原因分析：通常我們習慣用 height 屬性設置行間的高度和 line-height 屬性設置行間的距離（行高），當點擊輸入的時候，光標的高度就自動和父盒子的高度一樣了。（谷歌瀏覽器的設計原則，還有一種可能就是當沒有內容的時候光標的高度等於 input 的 line-height 的值，當有內容時，光標從 input 的頂端到文字的底部
解決辦法：高度 height 和行高 line-height 內容用 padding 撐開
例如：
.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 頁面上下滑動時卡頓、頁面缺失
問題詳情描述：在 ios 端，上下滑動頁面時，如果頁面高度超出了一屏，就會出現明顯的卡頓，頁面有部分內容顯示不全的情況，例如下圖，右圖是正常頁面，邊是 ios 上下滑動後，卡頓導致如左圖下面部分丟失。
圖片描述
出現原因分析：
籠統說微信瀏覽器的內核，Android 上面是使用自帶的 WebKit 內核，iOS 裏面由於蘋果的原因，使用了自帶的 Safari 內核，Safari 對於 overflow-scrolling 用了原生控件來實現。對於有 - webkit-overflow-scrolling 的網頁，會創建一個 UIScrollView，提供子 layer 給渲染模塊使用。【有待考證】
解決辦法：只需要在公共樣式加入下面這行代碼
*{
-webkit-overflow-scrolling: touch;
}
But，這個屬性是有 bug 的，比如如果你的頁面中有設置了絕對定位的節點，那麼該節點的顯示會錯亂，當然還有會有其他的一些 bug。
拓展知識：-webkit-overflow-scrolling:touch 是什麼？
MDN 上是這樣定義的：
-webkit-overflow-scrolling 屬性控制元素在移動設備上是否使用滾動回彈效果. auto: 使用普通滾動, 當手指從觸摸屏上移開，滾動會立即停止。touch: 使用具有回彈效果的滾動,
當手指從觸摸屏上移開，內容會繼續保持一段時間的滾動效果。繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比。同時也會創建一個新的堆棧上下文。
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);
}
},拓展知識：
Element.scrollIntoView() 方法讓當前的元素滾動到瀏覽器窗口的可視區域內。而 Element.scrollIntoViewIfNeeded() 方法也是用來將不在瀏覽器窗口的可見區域內的元素滾動到瀏覽器窗口的可見區域。但如果該元素已經在瀏覽器窗口的可見區域內，則不會發生滾動
5、Vue 中路由使用 hash 模式，開發微信 H5 頁面分享時在安卓上設置分享成功，但是 ios 的分享異常
問題詳情描述：
ios 當前頁面分享給好友，點擊進來是正常，如果二次分享，則跳轉到首頁；使用 vue router 跳轉到第二個頁面後在分享時，分享設置失敗；以上安卓分享都是正常
圖片描述
出現原因分析：jssdk 是後端進行簽署，前端校驗，但是有時跨域，ios 是分享以後會自動帶上 from=singlemessage&isappinstalled=0 以及其他參數，分享朋友圈參數還不一樣，貌似系統不一樣參數也不一樣，但是每次獲取 url 並不能獲取後面這些參數
解決辦法：
(1) 可以使用改頁面 this.$router.push 跳轉，爲 window.location.href 去跳轉，而不使用路由跳轉，這樣可以使地址欄的地址與當前頁的地址一樣，可以分享成功（適合分享的頁面不多的情況下，作爲一個單單頁運用，這樣刷新頁面跳轉，還是..）
（2）把入口地址保存在本地，等需要獲取簽名的時候 取出來，注意：sessionStorage.setItem(‘href’,href); 只在剛進入單應用的時候保存！【該方法未驗證】
題外話：如果能用小程序寫的頁面，儘量上小程序吧，H5 開發在微信開發者工具裏看頁面效果可能看不出問題，因爲不能喚起軟鍵盤。避免頻繁線上發佈，可以用花生殼或者 idcfengye，做內網穿透，搭建一個可以通過域名訪問的開發環境的 h5 頁面，在手機上看看效果，對了微信內置瀏覽器緩存機制。會導致剛提交的代碼（特別是 js）效果要半個小時左右才生效。
最後：
微信 H5 頁面其實很多知識，登陸授權，jssdk 授權，這裏就只做了分享，當然還有上傳圖片、微信支付等功能，都可能會遇到坑，以上幾個坑也是比較常遇到的，如果有更好的解決方案的話，歡迎在留言區分享。
作者：codercao
https://segmentfault.com/a/1190000019986963
本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/f1cETLcF0pvZQOPBLIrynw