這些兼容性大坑你遇到過麼？

一、ios兼容input光標高度

問題：input輸入光標，在安卓手機上顯示沒有問題，可是在蘋果手機上當點擊輸入的時候，光標的高度和父盒子的高度同樣。

出現問題緣由：一般咱們習慣用height屬性設置行間的高度和line-height屬性設置行高，當點擊輸入的時候，光標的高度就自動和父盒子的高度同樣了。（谷歌瀏覽器的設計原則，還有一種可能就是當沒有內容的時候光標的高度等於input的line-height的值，當有內容的時候，光標從input的頂端到文字的底部）

解決辦法：高度height和行高line-height內容用padding撐開。

二、ios端微信h5頁面上下滑動時卡頓、頁面缺失

問題：在ios端，上下滑動頁面時，若是頁面高度超出了一屏，就會出現明顯的卡頓，頁面有部份內容顯示不全的狀況。

問題緣由：微信瀏覽器的內核，Android上面是使用自帶的WebKit內核，iOS裏面因爲蘋果的緣由，使用了自帶的Safari內核，Safari對於overflow-scrolling用了原生控件來實現。對於有-webkit-overflow-scrolling的網頁，會建立一個UIScrollView，提供子layer給渲染模塊使用。

解決辦法：在公共樣式加上以下代碼

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

//解釋：該屬性控制元素在移動設備上是否使用滾動回彈效果。
//auto：使用普通滾動，當手指從觸摸屏上移開，滾動會當即中止。
//touch：使用具備回彈效果的滾動, 當手指從觸摸屏上移開，內容會繼續保持一段時間的滾動效果。
//       繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比。同時也會建立一個新的堆棧上下文。複製代碼

可是呢，這個屬性是有bug的，好比若是你的頁面中有設置了絕對定位的節點，那麼該節點的顯示會錯亂，固然還有會有其餘的一些bug。

三、ios鍵盤喚起，鍵盤收起後頁面不歸位

問題：輸入內容，軟鍵盤彈出，頁面總體內容上移，可是鍵盤收起，頁面內容不下滑。

問題緣由：固定定位的元素 在元素內 input 框聚焦的時候 彈出的軟鍵盤佔位 失去焦點的時候軟鍵盤消失 可是仍是佔位的 致使input框不能再次輸入 在失去焦點的時候給一個事件。

<div class="list-wrap">
    <div class="title"><span>姓名</span></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        window.scrollTo(0, Math.max(scrollHeight - 1, 0))        }, 200)    }  }複製代碼

拓展知識： position: fixed的元素在ios裏，收起鍵盤的時候會被頂上去，特別是第三方鍵盤

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

問題：安卓微信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);    }  }複製代碼

五、Vue中路由使用hash模式，開發微信H5頁面分享時在安卓上設置分享成功，可是ios的分享異常

問題：ios當前頁面分享給好友，點擊進來是正常，若是二次分享，則跳轉到首頁；使用vue router跳轉到第二個頁面後在分享時，分享設置失敗；以上安卓分享都是正常

緣由：jssdk是後端進行簽署，前端校驗，可是有時跨域，ios是分享之後會自動帶上from=singlemessage&isappinstalled=0 以及其餘參數，分享朋友圈參數還不同，貌似系統不同參數也不同，可是每次獲取url並不能獲取後面這些參數

解決辦法：

• 能夠使用改頁面this.$router.push跳轉，爲window.location.href去跳轉，而不使用路由跳轉，這樣能夠使地址欄的地址與當前頁的地址同樣，能夠分享成功（適合分享的頁面很少的狀況下，做爲一個單單頁運用，這樣刷新頁面跳轉，仍是..）
• 把入口地址保存在本地，等須要獲取簽名的時候 取出來，注意：sessionStorage.setItem(‘href’,href); 只在剛進入單應用的時候保存！