手机兼容问题记录一

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 */