微信H5頁面兼容性問題分析及解決方法

這期內容當中小編將會給大家帶來有關微信H5頁面兼容性問題分析及解決方法，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

隨著H5頁面越來越流行，越來越多的開發者都開始用最近H5做微信公眾號，在這個過程中自然也會遇到不少的問題。小編在這里整理了五種常見的微信H5頁面兼容性問題，來和大家分析一下問題的詳情、出現原因以及相對應的解決方法。有相關問題的小伙伴，就一起來看看吧！

1、ios端兼容input光標高度

問題詳情描述：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、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); 只在剛進入單應用的時候保存！

3、ios端微信h6頁面上下滑動時卡頓、頁面缺失。

問題詳情描述：在ios端，上下滑動頁面時，如果頁面高度超出了一屏，就會出現明顯的卡頓，頁面有部分內容顯示不全的情況。

出現原因分析：

籠統說微信瀏覽器的內核，Android上面是使用自帶的WebKit內核，iOS里面由于蘋果的原因，使用了自帶的Safari內核，Safari對于overflow-scrolling用了原生控件來實現。對于有-webkit-overflow-scrolling的網頁，會創建一個UIScrollView，提供子layer給渲染模塊使用。【有待考證】

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

*{

-webkit-overflow-scrolling: touch;

}

4、ios鍵盤喚起，鍵盤收起以后頁面不歸位

問題詳情描述：

輸入內容，軟鍵盤彈出，頁面內容整體上移，但是鍵盤收起，頁面內容不下滑。

出現原因分析：

固定定位的元素 在元素內 input 框聚焦的時候 彈出的軟鍵盤占位 失去焦點的時候軟鍵盤消失 但是還是占位的 導致input框不能再次輸入 在失去焦點的時候給一個事件。

解決辦法：

<div class="list-warp">

<div class="title"><span>投&middot;被保險人姓名</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

wind

ow.scrollTo(0, Math.max(scrollHeight - 1, 0))

}, 200)

}

}

5、安卓彈出的鍵盤遮蓋文本框

問題詳情描述：

安卓微信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);

}

}

上述就是小編為大家分享的微信H5頁面兼容性問題分析及解決方法了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。