移动端键盘弹出时的布局问题

目录

问题描述

分析原因

解决办法

1.原生js

2.jQuery

3.vue

---

问题描述

我在制作移动端页面时，因为只有一页，所以css设置成：

body {
  position: relative;
  width: 750px;
  height: 100%;
}

body .app {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

在手机上点击输入框弹出键盘时，或输入框可能被键盘压到时，iOS下的布局没什么影响，但是部分Android却出现了布局问题。

分析原因

当height设置为100%时，会导致键盘弹出的时候，html和body的高度从原来的100%变为（100% - 键盘高度），从而导致.app的height: 100%;也变为（100% - 键盘高度）。

也就是说.app在键盘弹出后不再是原来的高度了，这就使得页面的布局出现了问题。

解决办法

在知道原因后，我们可以在页面加载完后，js给body一个定高，来解决这个问题。

当然，在实际情况中，如果页面是分层的，可以将 body 换成最外层的div，效果是一样的。

具体实现如下：

1.原生js

window.onload = function() {
  var _body = document.getElementsByTagName('body')[0];
  _body.style.height = _body.clientHeight + 'px';
};

2.jQuery

$(document).ready(function () {
  $('body').height($('body')[0].clientHeight);
});

3.vue

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

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