每天前端開(kāi)發(fā)干貨第一時(shí)間送達(dá)！
作者：codercao
https://juejin.im/post/5d47d2eff265da03f77e4e3a
最近給公司微信公眾號(hào)，寫(xiě)了微信h5業(yè)務(wù)頁(yè)面，總結(jié)分享一下前端開(kāi)發(fā)過(guò)程中的幾個(gè)兼容性坑，項(xiàng)目直接拿的公司頁(yè)面，所以下文涉及圖片都模糊處理了。
問(wèn)題詳情描述：input輸入框光標(biāo)，在安卓手機(jī)上顯示沒(méi)有問(wèn)題，但是在蘋(píng)果手機(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)沒(méi)有內(nèi)容的時(shí)候光標(biāo)的高度等于input的line-height的值，當(dāng)有內(nèi)容時(shí)，光標(biāo)從input的頂端到文字的底部
解決辦法：高度height和行高line-height內(nèi)容用padding撐開(kāi)
例如：
.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; } }問(wèn)題詳情描述：在ios端，上下滑動(dòng)頁(yè)面時(shí)，如果頁(yè)面高度超出了一屏，就會(huì)出現(xiàn)明顯的卡頓，頁(yè)面有部分內(nèi)容顯示不全的情況，例如下圖，右圖是正常頁(yè)面，邊是ios上下滑動(dòng)后，卡頓導(dǎo)致如左圖下面部分丟失。
出現(xiàn)原因分析：
籠統(tǒng)說(shuō)微信瀏覽器的內(nèi)核，Android上面是使用自帶的WebKit內(nèi)核，iOS里面由于蘋(píng)果的原因，使用了自帶的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;}
But，這個(gè)屬性是有bug的，比如如果你的頁(yè)面中有設(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)手指從觸摸屏上移開(kāi)，滾動(dòng)會(huì)立即停止。touch: 使用具有回彈效果的滾動(dòng), 當(dāng)手指從觸摸屏上移開(kāi)，內(nèi)容會(huì)繼續(xù)保持一段時(shí)間的滾動(dòng)效果。繼續(xù)滾動(dòng)的速度和持續(xù)的時(shí)間和滾動(dòng)手勢(shì)的強(qiáng)烈程度成正比。同時(shí)也會(huì)創(chuàng)建一個(gè)新的堆棧上下文。
問(wèn)題詳情描述：
輸入內(nèi)容，軟鍵盤(pán)彈出，頁(yè)面內(nèi)容整體上移，但是鍵盤(pán)收起，頁(yè)面內(nèi)容不下滑
出現(xiàn)原因分析：
固定定位的元素 在元素內(nèi) input 框聚焦的時(shí)候 彈出的軟鍵盤(pán)占位 失去焦點(diǎn)的時(shí)候軟鍵盤(pán)消失 但是還是占位的 導(dǎo)致input框不能再次輸入 在失去焦點(diǎn)的時(shí)候給一個(gè)事件
解決辦法：
<div class='list-warp'> <div class='title'><span>投·被保險(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 window.scrollTo(0, Math.max(scrollHeight - 1, 0)) }, 200) } }拓展知識(shí)： position: fixed的元素在ios里，收起鍵盤(pán)的時(shí)候會(huì)被頂上去，特別是第三方鍵盤(pán)
問(wèn)題詳情描述：
安卓微信H5彈出軟鍵盤(pán)后擋住input輸入框，如下左圖是期待喚起鍵盤(pán)的時(shí)候樣子，右邊是實(shí)際喚起鍵盤(pán)的樣子
出現(xiàn)原因分析：待補(bǔ)充
解決辦法：給input和textarea標(biāo)簽添加focus事件，如下，先判斷是不是安卓手機(jī)下的操作，當(dāng)然，可以不用判斷機(jī)型，Document 對(duì)象屬性和方法，setTimeout延時(shí)0.5秒，因?yàn)檎{(diào)用安卓鍵盤(pán)有一點(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);}}
拓展知識(shí)：
Element.scrollIntoView()方法讓當(dāng)前的元素滾動(dòng)到瀏覽器窗口的可視區(qū)域內(nèi)。而Element.scrollIntoViewIfNeeded()方法也是用來(lái)將不在瀏覽器窗口的可見(jiàn)區(qū)域內(nèi)的元素滾動(dòng)到瀏覽器窗口的可見(jiàn)區(qū)域。但如果該元素已經(jīng)在瀏覽器窗口的可見(jiàn)區(qū)域內(nèi)，則不會(huì)發(fā)生滾動(dòng)
問(wèn)題詳情描述：
ios當(dāng)前頁(yè)面分享給好友，點(diǎn)擊進(jìn)來(lái)是正常，如果二次分享，則跳轉(zhuǎn)到首頁(yè)；使用vue router跳轉(zhuǎn)到第二個(gè)頁(yè)面后在分享時(shí)，分享設(shè)置失??；以上安卓分享都是正常
聯(lián)系客服
