h5-ios和Android手机输入键盘总结-android软键盘弹出

参考文章
原因：
ios当输入框聚焦弹出键盘的时候，页面高度没有变化，是分层的，软键盘是盖在网页上的

Android的软键盘弹出的时候，软键盘是占据页面的高度的，这时候你的页面高度发生变化，页面上滑让给软键盘，你fixed底部的东西都会弹上去，页面高度为 页面+软键盘

解决办法：
iOS：这时候页面会出现滑动，想让页面不滑动，需要设置页面滑动到顶端

  scrollTop(){
    // ios页面滚动到最顶层
    window.scrollTo(0,0);
    document.body.scrollTop=0;
    document.documentElement.scrollTop=0;
  }

这个对Android没用，页面高度就发生了变化，你去判断页面高度的变化就可以了

  // 监听安卓手机键盘的收缩，弹出
  pageResize(){
      let winH=document.documentElement.clientHeight;
      window.onresize = () => {
          let curH=document.documentElement.clientHeight;
          if (winH-curH>200) {//弹出
            //隐藏底部按钮           
          } else {
            //显示底部按钮
          }
      }
  }

隐藏方式：

display: none; // DOM元素直接不渲染，在文档流不占位置
visibility: hidden; // DOM元素仍渲染，在文档流占位置，但不可见，不可触发事件
opacity: 0; // DOM元素仍渲染，在文档流占位置，但不可见，可点击，可触发事件
transform: tranlateX(‘500px’); // DOM元素仍渲染，在文档流占位置,只是移出了可见范围

参考文章：
H5 –（解决）安卓中input输入框获取焦点后，底部固定定位的按钮顶起问题
H5防止安卓手机软键盘弹出挤压页面导致变形的方法
移动端软键盘监听（弹出，收起），及影响定位布局的问题