【踩坑】解决移动端软键盘压缩页面布局的问题 - 01移动端解决input获取焦点软键盘弹出影响定位的问题，通过获取到初始

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动

在最近的一次H5页面开发中，页面使用绝对定位或百分比，vh、vh来布局时软键盘压缩页面的问题，发现页面在移动端点击下方输入框的时候，会对页面布局产生影响：

唤起软键盘后，页面就被压缩；
解决上述问题后，又出现：input输入框开始输入文字后，页面又被压缩；

一、问题一解决方案：一进入页面，就将页面的高度固定下来，首先获取浏览器可视区的高度，然后把高度赋给页面根div。

var hrt = document.body.clientHeight;
<section className="game-room" id="gameRoom"  style={{ height: winh + "px" }}>

二、问题二解决方案：通过判断window.onresize前后大小，间接判断软键盘弹出，在对页面布局做处理，如改变position或设置容易大小为定值。

初始时获取到初始视口大小，然后存到localStorage或其他本地存储里，然后设置成最外层容器大小，然后内部就可以用百分比设置布局了。

var winh = document.body.clientHeight;
window.localStorage.setItem("curwinh", winh);

监听window.onresize,不论是否有软键盘，最外层容器始终和视口高度一致。

window.onresize = function () {
  var newh = window.localStorage.getItem("curwinh");
  document.getElementById("app").style.height = newh + "px";
}

如果软键盘弹出和收起时还有其他样式的变化，可以使用如下代码：

var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
window.onresize = function () {
  var nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight;
  if (clientHeight > nowClientHeight) {
        //键盘弹出的事件处理
        document.getElementById("input-box").style.background = 'rgba(236,246,253,0.3)'

  } else {
    //键盘收起的事件处理
    document.getElementById("input-box").style.background = '#ecf6fd'
  }
}

这样就解决了当输入文字时，页面会压缩的问题了！

【踩坑】解决移动端软键盘压缩页面布局的问题 - 01

一、问题一解决方案：一进入页面，就将页面的高度固定下来，首先获取浏览器可视区的高度，然后把高度赋给页面根div。

二、问题二解决方案：通过判断window.onresize前后大小，间接判断软键盘弹出，在对页面布局做处理，如改变position或设置容易大小为定值。

相关拓展：input 在移动端ios，获得焦点时，光标消失或错位。