安卓 | iOS 键盘事件兼容

问题描述:  H5安卓拉起键盘时,会挤压页面,使页面布局变形缩小;

　　　　  iOS拉起键盘后,底下会有一块留白;(没有图片例子,要是忘了就算了吧)

安卓:

　　安卓键盘拉起会占页面高度,类似百分比布局的话,页面就会被压缩,导致变形严重,可以采用当页面高度发生变化的时候,使下面的内容隐藏或者展示

 1   function Android(){
 2       //安卓适配 键盘弹起页面压缩
 3       const u = navigator.userAgent;
 4       let that = this;
 5       if (u.indexOf("Android") > -1 || u.indexOf("Linux") > -1) {
 6         //安卓手机
 7         // 获取视图原始高度
 8         let screenHeight = document.body.offsetHeight;
 9         // 为window绑定resize事件
10         window.onresize = function() {
11           let nowHeight = document.body.offsetHeight;
12           if (nowHeight < screenHeight) {
13             that.display = "display: none";
14           } else {
15             that.display = "";
16           }
17         };
18       }
19   }

View Code

iOS:

    iOS留白是因为键盘弹起之后页面滞留了(个人理解),iOS又有一个弹性的拉伸,就留白了(我以为我没变,其实我偷偷长高了)

1 function scrollTop() {    //键盘收起后就让页面拉到初始位置
2     window.scroll(0, 0);
3 }

View Code

以上,另:  H5是整页

PS: 很多奇怪的兼容可以另辟蹊径,只要用户使用上影响不大,可以偷换概念的兼容.