這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)微信H5頁(yè)面兼容性問(wèn)題分析及解決方法，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

成都創(chuàng)新互聯(lián)是專業(yè)的肇州網(wǎng)站建設(shè)公司，肇州接單;提供成都網(wǎng)站制作、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè),網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行肇州網(wǎng)站開發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

隨著H5頁(yè)面越來(lái)越流行，越來(lái)越多的開發(fā)者都開始用最近H5做微信公眾號(hào)，在這個(gè)過(guò)程中自然也會(huì)遇到不少的問(wèn)題。小編在這里整理了五種常見的微信H5頁(yè)面兼容性問(wèn)題，來(lái)和大家分析一下問(wèn)題的詳情、出現(xiàn)原因以及相對(duì)應(yīng)的解決方法。有相關(guān)問(wèn)題的小伙伴，就一起來(lái)看看吧！

1、ios端兼容input光標(biāo)高度

問(wèn)題詳情描述：input輸入框光標(biāo)，在安卓手機(jī)上顯示沒(méi)有問(wèn)題，但是在蘋果手機(jī)上當(dāng)點(diǎn)擊輸入的時(shí)候，光標(biāo)的高度和父盒子的高度一樣。

出現(xiàn)原因分析：通常我們習(xí)慣用height屬性設(shè)置行間的高度和line-height屬性設(shè)置行間的距離（行高），當(dāng)點(diǎn)擊輸入的時(shí)候，光標(biāo)的高度就自動(dòng)和父盒子的高度一樣了。（谷歌瀏覽器的設(shè)計(jì)原則，還有一種可能就是當(dāng)沒(méi)有內(nèi)容的時(shí)候光標(biāo)的高度等于input的line-height的值，當(dāng)有內(nèi)容時(shí)，光標(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、Vue中路由使用hash模式，開發(fā)微信H5頁(yè)面分享時(shí)在安卓上設(shè)置分享成功，但是ios的分享異常。

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

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

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

解決辦法：

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

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

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

問(wèn)題詳情描述：在ios端，上下滑動(dòng)頁(yè)面時(shí)，如果頁(yè)面高度超出了一屏，就會(huì)出現(xiàn)明顯的卡頓，頁(yè)面有部分內(nèi)容顯示不全的情況。

出現(xiàn)原因分析：

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

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

*{

-webkit-overflow-scrolling: touch;

}

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

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

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

出現(xiàn)原因分析：

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

解決辦法：

<div class="list-warp">

<div class="title"><span>投&middot;被保險(xiǎn)人姓名</span></div>

<div class="content">

<input class="content-input"

placeholder="請(qǐng)輸入姓名"

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

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

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

解決辦法：給input和textarea標(biāo)簽添加focus事件，如下，先判斷是不是安卓手機(jī)下的操作，當(dāng)然，可以不用判斷機(jī)型，Document 對(duì)象屬性和方法，setTimeout延時(shí)0.5秒，因?yàn)檎{(diào)用安卓鍵盤有一點(diǎn)遲鈍，導(dǎo)致如果不延時(shí)處理的話，滾動(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);

}

}

上述就是小編為大家分享的微信H5頁(yè)面兼容性問(wèn)題分析及解決方法了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

文章名稱：微信H5頁(yè)面兼容性問(wèn)題分析及解決方法
本文地址：http://chinadenli.net/article38/gieepp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、關(guān)鍵詞優(yōu)化、網(wǎng)站制作、定制網(wǎng)站、、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)