HTML文本是一種描述式語言，HTML命令可以解釋文字、圖形、動畫、聲音、表格、鏈接等等。其結構包括頭部(頭)、主體(主體)(主體)兩大部分，而主體包含要說明的具體內容。下面就讓小編來給大家分享一下微信 H5 開發常見兼容性的坑有什么，讓我們一起來看看吧。

易企秀

3.9

260條點評

咨詢產品

免費試用

解決用戶選型困難的好軟件，有各維度的信息

客戶案例

4

合作品牌

18

微信 H5 開發常見兼容性的坑有什么

1、ios端兼容input光標高度

       問題詳情描述：input輸入框光標，在安卓手機上顯示沒有問題，但是在蘋果手機上
當點擊輸入的時候，光標的高度和父盒子的高度一樣。例如下圖，左圖是正常所期待的輸入框光標，右邊是ios的input光標。

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

       解決辦法：高度height和行高line-height內容用padding撐開

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、安卓彈出的鍵盤遮蓋文本框

       問題詳情描述：

       安卓微信H5彈出軟鍵盤后擋住input輸入框

       出現原因分析：待補充

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

拓展知識：

       Element.scrollIntoView()方法讓當前的元素滾動到瀏覽器窗口的可視區域內。而Element.scrollIntoViewIfNeeded()方法也是用來將不在瀏覽器窗口的可見區域內的元素滾動到瀏覽器窗口的可見區域。但如果該元素已經在瀏覽器窗口的可見區域內，則不會發生滾動

4、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頁面知識很多，登陸授權，jssdk授權，當然還有上傳圖片，微信支付等功能，也可能會遇到一些坑，這些坑也是比較常見的，如果有更好的解決方案，歡迎在留言區分享。以上就是小編為大家分享的關于“微信 H5 開發常見兼容性的坑有什么”的全部內容啦，希望能夠給大家帶來幫助哦。