1. IOS系統(tǒng)下輸入框光標(biāo)高度不正常

問題描述：input輸入框光標(biāo)，在安卓手機(jī)上顯示沒有問題，但是在蘋果手機(jī)上當(dāng)點(diǎn)擊輸入的時(shí)候，光標(biāo)的高度和父盒子的高度一樣，看起來(lái)很怪異。例如下圖，左圖是正常所期待的輸入框光標(biāo)，右邊是IOS的 input 光標(biāo)。

解決辦法：高度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. IOS?端微信H5頁(yè)面上下滑動(dòng)時(shí)卡頓和頁(yè)面缺失

問題描述：在IOS端，上下滑動(dòng)頁(yè)面時(shí)，如果頁(yè)面高度超出了一屏，就會(huì)出現(xiàn)明顯的卡頓，頁(yè)面有部分內(nèi)容顯示不全的情況。例如下圖，右圖是正常頁(yè)面，左邊是IOS上下滑動(dòng)后，卡頓導(dǎo)致如左圖下面部分丟失。

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

*{-webkit-overflow-scrolling: touch; }

注意：加了這個(gè)屬性以后，如果頁(yè)面中有設(shè)置了絕對(duì)定位的節(jié)點(diǎn)，那么該節(jié)點(diǎn)的顯示會(huì)錯(cuò)亂。

-webkit-overflow-scrolling是什么？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. IOS鍵盤喚起，鍵盤收起以后頁(yè)面不歸位

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

解決辦法：在輸入框失失去焦點(diǎn)的時(shí)候添加一個(gè)事件，讓頁(yè)面回滾。

changeBlur(){var userAgent = navigator.userAgent; var isIOS = !!userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);if(isIOS){setTimeout(() => {var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;window.scrollTo(0, Math.max(scrollHeight - 1, 0))}, 200)} }

注意：固定定位的元素在IOS里，收起鍵盤的時(shí)候會(huì)被頂上去，特別是第三方鍵盤。

4. 安卓彈出的鍵盤遮蓋文本框

問題描述：安卓微信H5彈出軟鍵盤后擋住input輸入框，看不到輸入的字符。如下左圖是期待喚起鍵盤的時(shí)候樣子，右邊是實(shí)際喚起鍵的樣子。

解決辦法：給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(){var userAgent = navigator.userAgent;var isAndroid = userAgent.indexOf('Android') > -1 || userAgent.indexOf('Linux') > -1;if(isAndroid){setTimeout(function() {document.activeElement.scrollIntoViewIfNeeded();document.activeElement.scrollIntoView();}, 500); } }

Element.scrollIntoView()方法讓當(dāng)前的元素滾動(dòng)到瀏覽器窗口的可視區(qū)域內(nèi)。

Element.scrollIntoViewIfNeeded()方法也是用來(lái)將不在瀏覽器窗口的可見區(qū)域內(nèi)的元素滾動(dòng)到瀏覽器窗口的可見區(qū)域，但如果該元素已經(jīng)在瀏覽器窗口的可見區(qū)域內(nèi)，則不會(huì)發(fā)生滾動(dòng)。

5.?Vue中使用hash模式路由，微信H5頁(yè)面在IOS分享異常

問題描述：IOS當(dāng)前頁(yè)面分享給好友，點(diǎn)擊進(jìn)來(lái)是正常，如果二次分享，則跳轉(zhuǎn)到首頁(yè)。使用vue router跳轉(zhuǎn)到第二個(gè)頁(yè)面后在分享時(shí)，分享設(shè)置失敗。如下圖中的第二個(gè)分享就是有問題的，而第一個(gè)分享是正常的。

解決辦法：

1. 可以用window.location.href去跳轉(zhuǎn)，而不使用路由跳轉(zhuǎn)，這樣可以使地址欄的地址與當(dāng)前頁(yè)的地址一樣，可以分享成功；

2. 把入口地址保存在本地，等需要的時(shí)候取出來(lái)；

如果能用小程序?qū)懙捻?yè)面，盡量上小程序吧，H5開發(fā)在微信開發(fā)者工具里看頁(yè)面效果可能看不出問題，因?yàn)椴荒軉酒疖涙I盤。

總結(jié)

以上是生活随笔為你收集整理的H5页面前端开发常见的兼容性问题解决方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。