微信 H5 開發(fā)常見兼容性的坑有什么
HTML文本是一種描述式語言，HTML命令可以解釋文字、圖形、動(dòng)畫、聲音、表格、鏈接等等。其結(jié)構(gòu)包括頭部(頭)、主體(主體)(主體)兩大部分，而主體包含要說明的具體內(nèi)容。下面就讓小編來給大家分享一下微信 H5 開發(fā)常見兼容性的坑有什么，讓我們一起來看看吧。
微信 H5 開發(fā)常見兼容性的坑有什么
1、ios端兼容input光標(biāo)高度
問題詳情描述：input輸入框光標(biāo)，在安卓手機(jī)上顯示沒有問題，但是在蘋果手機(jī)上
當(dāng)點(diǎn)擊輸入的時(shí)候，光標(biāo)的高度和父盒子的高度一樣。例如下圖，左圖是正常所期待的輸入框光標(biāo)，右邊是ios的input光標(biāo)。
出現(xiàn)原因分析：通常我們習(xí)慣用height屬性設(shè)置行間的高度和line-height屬性設(shè)置行間的距離（行高），當(dāng)點(diǎn)擊輸入的時(shí)候，光標(biāo)的高度就自動(dòng)和父盒子的高度一樣了。（谷歌瀏覽器的設(shè)計(jì)原則，還有一種可能就是當(dāng)沒有內(nèi)容的時(shí)候光標(biāo)的高度等于input的line-height的值，當(dāng)有內(nèi)容時(shí)，光標(biāo)從input的頂端到文字的底部
解決辦法：高度height和行高line-height內(nèi)容用padding撐開
2、ios端微信h5頁面上下滑動(dòng)時(shí)卡頓、頁面缺失
問題詳情描述：在ios端，上下滑動(dòng)頁面時(shí)，如果頁面高度超出了一屏，就會(huì)出現(xiàn)明顯的卡頓，頁面有部分內(nèi)容顯示不全的情況，例如下圖，右圖是正常頁面，邊是ios上下滑動(dòng)后，卡頓導(dǎo)致如左圖下面部分丟失。
出現(xiàn)原因分析：
籠統(tǒng)說微信瀏覽器的內(nèi)核，Android上面是使用自帶的WebKit內(nèi)核，iOS里面由于蘋果的原因，使用了自帶的Safari內(nèi)核，Safari對(duì)于overflow-scrolling用了原生控件來實(shí)現(xiàn)。對(duì)于有-webkit-overflow-scrolling的網(wǎng)頁，會(huì)創(chuàng)建一個(gè)UIScrollView，提供子layer給渲染模塊使用。【有待考證】
解決辦法：只需要在公共樣式加入下面這行代碼
*{
-webkit-overflow-scrolling: touch;
}
But，這個(gè)屬性是有bug的，比如如果你的頁面中有設(shè)置了絕對(duì)定位的節(jié)點(diǎn)，那么該節(jié)點(diǎn)的顯示會(huì)錯(cuò)亂，當(dāng)然還有會(huì)有其他的一些bug。
拓展知識(shí)：-webkit-overflow-scrolling:touch是什么？
MDN上是這樣定義的：
-webkit-overflow-scrolling 屬性控制元素在移動(dòng)設(shè)備上是否使用滾動(dòng)回彈效果. auto: 使用普通滾動(dòng), 當(dāng)手指從觸摸屏上移開，滾動(dòng)會(huì)立即停止。touch: 使用具有回彈效果的滾動(dòng),
當(dāng)手指從觸摸屏上移開，內(nèi)容會(huì)繼續(xù)保持一段時(shí)間的滾動(dòng)效果。繼續(xù)滾動(dòng)的速度和持續(xù)的時(shí)間和滾動(dòng)手勢(shì)的強(qiáng)烈程度成正比。同時(shí)也會(huì)創(chuàng)建一個(gè)新的堆棧上下文。
3、安卓彈出的鍵盤遮蓋文本框
問題詳情描述：
安卓微信H5彈出軟鍵盤后擋住input輸入框
出現(xiàn)原因分析：待補(bǔ)充
解決辦法：給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)就失效了
拓展知識(shí)：
Element.scrollIntoView()方法讓當(dāng)前的元素滾動(dòng)到瀏覽器窗口的可視區(qū)域內(nèi)。而Element.scrollIntoViewIfNeeded()方法也是用來將不在瀏覽器窗口的可見區(qū)域內(nèi)的元素滾動(dòng)到瀏覽器窗口的可見區(qū)域。但如果該元素已經(jīng)在瀏覽器窗口的可見區(qū)域內(nèi)，則不會(huì)發(fā)生滾動(dòng)
4、Vue中路由使用hash模式，開發(fā)微信H5頁面分享時(shí)在安卓上設(shè)置分享成功，但是ios的分享異常
問題詳情描述：
ios當(dāng)前頁面分享給好友，點(diǎn)擊進(jìn)來是正常，如果二次分享，則跳轉(zhuǎn)到首頁；使用vue router跳轉(zhuǎn)到第二個(gè)頁面后在分享時(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）可以使用改頁面this.$router.push跳轉(zhuǎn)，為window.location.href去跳轉(zhuǎn)，而不使用路由跳轉(zhuǎn)，這樣可以使地址欄的地址與當(dāng)前頁的地址一樣，可以分享成功（適合分享的頁面不多的情況下，作為一個(gè)單單頁運(yùn)用，這樣刷新頁面跳轉(zhuǎn)，還是..）
（2）把入口地址保存在本地，等需要獲取簽名的時(shí)候 取出來，注意：sessionStorage.setItem(‘href’,href); 只在剛進(jìn)入單應(yīng)用的時(shí)候保存！【該方法未驗(yàn)證】
實(shí)際上，微信H5頁面知識(shí)很多，登陸授權(quán)，jssdk授權(quán)，當(dāng)然還有上傳圖片，微信支付等功能，也可能會(huì)遇到一些坑，這些坑也是比較常見的，如果有更好的解決方案，歡迎在留言區(qū)分享。以上就是小編為大家分享的關(guān)于“微信 H5 開發(fā)常見兼容性的坑有什么”的全部?jī)?nèi)容啦，希望能夠給大家?guī)韼椭丁?/p>
[免責(zé)聲明]
文章標(biāo)題： 微信 H5 開發(fā)常見兼容性的坑有什么
文章內(nèi)容為網(wǎng)站編輯整理發(fā)布，僅供學(xué)習(xí)與參考，不代表本網(wǎng)站贊同其觀點(diǎn)和對(duì)其真實(shí)性負(fù)責(zé)。如涉及作品內(nèi)容、版權(quán)和其它問題，請(qǐng)及時(shí)溝通。發(fā)送郵件至36dianping@36kr.com，我們會(huì)在3個(gè)工作日內(nèi)處理。
