原文： https://mp.weixin.qq.com/s/TQfENpzCuKgzzEBs2i5dxQ
最近給公司微信公眾號，寫了微信h5業(yè)務(wù)頁面，總結(jié)分享一下前端開發(fā)過程中的幾個兼容性坑，項目直接拿的公司頁面，所以下文涉及圖片都模糊處理了。
1、ios端兼容input光標(biāo)高度
問題詳情描述：input輸入框光標(biāo)，在安卓手機上顯示沒有問題，但是在蘋果手機上
當(dāng)點擊輸入的時候，光標(biāo)的高度和父盒子的高度一樣。例如下圖，左圖是正常所期待的輸入框光標(biāo)，右邊是ios的input光標(biāo)。
出現(xiàn)原因分析：通常我們習(xí)慣用height屬性設(shè)置行間的高度和line-height屬性設(shè)置行間的距離（行高），當(dāng)點擊輸入的時候，光標(biāo)的高度就自動和父盒子的高度一樣了。（谷歌瀏覽器的設(shè)計原則，還有一種可能就是當(dāng)沒有內(nèi)容的時候光標(biāo)的高度等于input的line-height的值，當(dāng)有內(nèi)容時，光標(biāo)從input的頂端到文字的底部
解決辦法：高度height和行高line-height內(nèi)容用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端，上下滑動頁面時，如果頁面高度超出了一屏，就會出現(xiàn)明顯的卡頓，頁面有部分內(nèi)容顯示不全的情況，例如下圖，右圖是正常頁面，邊是ios上下滑動后，卡頓導(dǎo)致如左圖下面部分丟失。
出現(xiàn)原因分析：
籠統(tǒng)說微信瀏覽器的內(nèi)核，Android上面是使用自帶的WebKit內(nèi)核，iOS里面由于蘋果的原因，使用了自帶的Safari內(nèi)核，Safari對于overflow-scrolling用了原生控件來實現(xiàn)。對于有-webkit-overflow-scrolling的網(wǎng)頁，會創(chuàng)建一個UIScrollView，提供子layer給渲染模塊使用。【有待考證】
解決辦法：只需要在公共樣式加入下面這行代碼
*{
-webkit-overflow-scrolling:?touch;
}
But，這個屬性是有bug的，比如如果你的頁面中有設(shè)置了絕對定位的節(jié)點，那么該節(jié)點的顯示會錯亂，當(dāng)然還有會有其他的一些bug。
拓展知識：?-webkit-overflow-scrolling:touch是什么？
MDN上是這樣定義的：
-webkit-overflow-scrolling?屬性控制元素在移動設(shè)備上是否使用滾動回彈效果.
auto: 使用普通滾動, 當(dāng)手指從觸摸屏上移開，滾動會立即停止。
touch: 使用具有回彈效果的滾動, 當(dāng)手指從觸摸屏上移開，內(nèi)容會繼續(xù)保持一段時間的滾動效果。繼續(xù)滾動的速度和持續(xù)的時間和滾動手勢的強烈程度成正比。同時也會創(chuàng)建一個新的堆棧上下文。
3、ios鍵盤喚起，鍵盤收起以后頁面不歸位
問題詳情描述：
?輸入內(nèi)容，軟鍵盤彈出，頁面內(nèi)容整體上移，但是鍵盤收起，頁面內(nèi)容不下滑
出現(xiàn)原因分析：
固定定位的元素 在元素內(nèi) input 框聚焦的時候 彈出的軟鍵盤占位 失去焦點的時候軟鍵盤消失 但是還是占位的 導(dǎo)致input框不能再次輸入 在失去焦點的時候給一個事件
解決辦法：
投·被保險人姓名
placeholder="請輸入姓名"
v-model="peopleList.name"
@focus="changefocus()"
@blur.prevent="changeBlur()"/>
changeBlur(){
letu?=?navigator.userAgent,?app?=?navigator.appVersion;
letisIOS?=?!!u.match(/\(i[^;]+;(?U;)??CPU.+Mac?OS?X/);
if(isIOS){
setTimeout(()=>{
constscrollHeight?=document.documentElement.scrollTop?||document.body.scrollTop?||0
window.scrollTo(0,Math.max(scrollHeight?-1,0))
},200)
}
}
拓展知識：position: fixed的元素在ios里，收起鍵盤的時候會被頂上去，特別是第三方鍵盤
4、安卓彈出的鍵盤遮蓋文本框
問題詳情描述：
安卓微信H5彈出軟鍵盤后擋住input輸入框，如下左圖是期待喚起鍵盤的時候樣子，右邊是實際喚起鍵盤的樣子
出現(xiàn)原因分析：待補充
解決辦法：給input和textarea標(biāo)簽添加focus事件，如下，先判斷是不是安卓手機下的操作，當(dāng)然，可以不用判斷機型，Document 對象屬性和方法，setTimeout延時0.5秒，因為調(diào)用安卓鍵盤有一點遲鈍，導(dǎo)致如果不延時處理的話，滾動就失效了
changefocus(){
letu?=?navigator.userAgent,?app?=?navigator.appVersion;
letisAndroid?=?u.indexOf('Android')?>-1||?u.indexOf('Linux')?>-1;
if(isAndroid){
setTimeout(function(){
document.activeElement.scrollIntoViewIfNeeded();
document.activeElement.scrollIntoView();
},500);
}
},
拓展知識：
Element.scrollIntoView()方法讓當(dāng)前的元素滾動到瀏覽器窗口的可視區(qū)域內(nèi)。而Element.scrollIntoViewIfNeeded()方法也是用來將不在瀏覽器窗口的可見區(qū)域內(nèi)的元素滾動到瀏覽器窗口的可見區(qū)域。但如果該元素已經(jīng)在瀏覽器窗口的可見區(qū)域內(nèi)，則不會發(fā)生滾動
5、Vue中路由使用hash模式，開發(fā)微信H5頁面分享時在安卓上設(shè)置分享成功，但是ios的分享異常
問題詳情描述：
ios當(dāng)前頁面分享給好友，點擊進來是正常，如果二次分享，則跳轉(zhuǎn)到首頁；使用vue router跳轉(zhuǎn)到第二個頁面后在分享時，分享設(shè)置失敗；以上安卓分享都是正常
出現(xiàn)原因分析：jssdk是后端進行簽署，前端校驗，但是有時跨域，ios是分享以后會自動帶上 from=singlemessage&isappinstalled=0 以及其他參數(shù)，分享朋友圈參數(shù)還不一樣，貌似系統(tǒng)不一樣參數(shù)也不一樣，但是每次獲取url并不能獲取后面這些參數(shù)
解決辦法：
(1)可以使用改頁面this.$router.push跳轉(zhuǎn)，為window.location.href去跳轉(zhuǎn)，而不使用路由跳轉(zhuǎn)，這樣可以使地址欄的地址與當(dāng)前頁的地址一樣，可以分享成功（適合分享的頁面不多的情況下，作為一個單單頁運用，這樣刷新頁面跳轉(zhuǎn)，還是..）
（2）把入口地址保存在本地，等需要獲取簽名的時候 取出來，注意：sessionStorage.setItem(‘href’,href); 只在剛進入單應(yīng)用的時候保存！【該方法未驗證】
題外話：
如果能用小程序?qū)懙捻撁?，盡量上小程序吧，H5開發(fā)在微信開發(fā)者工具里看頁面效果可能看不出問題，因為不能喚起軟鍵盤。避免頻繁線上發(fā)布，可以用花生殼或者idcfengye，做內(nèi)網(wǎng)穿透，搭建一個可以通過域名訪問的開發(fā)環(huán)境的h5頁面，在手機上看看效果，對了微信內(nèi)置瀏覽器緩存機制。會導(dǎo)致剛提交的代碼（特別是js）效果要半個小時左右才生效。
最后：
微信H5頁面其實很多知識，登陸授權(quán)，jssdk授權(quán)，這里就只做了分享，當(dāng)然還有上傳圖片、微信支付等功能，都可能會遇到坑，以上幾個坑也是比較常遇到的，如果有更好的解決方案的話，歡迎在留言區(qū)分享
作者：codercao
鏈接：https://juejin.im/post/5d47d2eff265da03f77e4e3a
