[mui]移动端键盘弹出后，导致背景图片上移解决方法

问题描述

.mui-content {
    background-image:url(../images/iamge_bg_loading.png);
    background-position: center center;
    background-size: cover;
    background-attachment:fixed;
    background-color: #cccccc;
    min-height:100%;
}

设置背景图的高度为100%时，会导致键盘弹出的时候html和body的高度从原来的100%变为（100%-键盘高度），这样的话main的height:100%也会变成（100%-键盘高度），所以需要强行将main的高度设置为html原本的100%。

解决方法

原生js实现

由于jq会稍微影响mui性能（少量使用无所谓），所以能用原生实现的时候尽量用原生。

//固定高度，解决弹出键盘背景图上移问题
    window.function(){
        document.getElementsByTagName("body")[0].style.height = window.innerHeight+'px';
    }

此处注意要加’px’，window.innerHeight获取到的是不带单位的数字

vue+vux实现

//login.vue
<div class="login" :style="{ height: bodyHeight + 'px' }">

//app.vue配合使用ViewBox

      <div style="height:100%;">
        <view-box ref="viewBox">
          <router-view></router-view>
        </view-box>
      </div>

//js
mounted(){
      this.bodyHeight=document.documentElement.clientHeight
    }

参考：cooqi简书

JQ实现

$(document).ready(function () { $('body').css({'height':$(window).height()})});

参考：笑笑~上善若水博客园

其他

<div class="main" :style="{ height: bodyHeight + 'px' }">
</div>


mounted(){
 this.bodyHeight=document.documentElement.clientHeight
}

参考：王兴邦CSDN