手機兼容問題記錄一

1、問題：微信端頁面input輸入時鍵盤會擋住輸入框內容

      分析：由於使用絕對定位，無法讓內容自動上浮。

2、問題：IOS上微信在輸入框彈出鍵盤後，頁面不恢復，下方有留白

    分析：（1）ios12以下版本，可以採用監聽blur事件，並利用scrollIntoViewIfNeeded(true)方法滾動恢復

               （2）ios所有版本以及ios13以上，可以採用監聽blur事件，並利用window.scroll(0,0)方法滾動恢復

                 建議再加個定時器，頁面看起來會更加維和一些，例如

                   

<input onblur="scroll"/>
<script>
    setimeOut(()=> {
        window.scroll(0,0);
    }, 100);
</script>

3、問題：backface-visibility的兼容問題，

      分析： 只有 Internet Explorer 10+ 和 Firefox 支持 backface-visibility 屬性。

                 Opera 15+、Safari 和 Chrome 支持替代的 -webkit-backface-visibility 屬性。

      建議：寫樣式的時候，都把前綴加上，

backface-visibility:hidden;
-webkit-backface-visibility:hidden;	/* Chrome 和 Safari */
-moz-backface-visibility:hidden; 	/* Firefox */
-ms-backface-visibility:hidden; 	/* Internet Explorer */