虽然第一份工作大部分时间是做移动端，主要用的是 flex 和 rem 布局，到后期放弃 rem 了，发现大屏手机显示更多内容的效果更好。以前也遇到过软键盘影响定位布局的问题，都是拿来老板手机同款的测试机，定位出问题就流水布局吧，各种投机倒把把当前需求完成就完事了。立个 flag，遇到问题，不稳稳的解决不罢休。

小键盘影响布局

最近在安卓手机上遇到个现象，软键盘弹出的时候，把整个背景都顶上去了，我对背景用的是 100% 这样的布局形式。

1
2
3
4

html,
body {
  height: 100%;
}

这就有个问题，iOS 下面软键盘的弹出并不会干扰页面显示，但是安卓下的软键盘弹出会挤压 body，导致这个 height: 100% 所占的垂直屏幕高度不再是 height: 100%，这就然背景挤压了，但是页面上的元素还是采用流水布局下来的，那这就尴尬了，元素没有背景的，各种白色的元素在白色的背景下。

锁死高度

这里还是用 JS 是最稳的，获取到当前页面后的，高度就把背景锁死，管它软键盘怎么干扰，背景就是那么高，永远不会被影响。

1
2

// 防止软键盘影响背景
$("body,html").height(document.body.clientHeight);

吸底元素

第二个问题是吸底布局的问题，以前也有这种吸底的需求，出问题我直接改成流水布局了，反正离下面也不远，“大多数”手机是差不多的，其实想都想得到肯定有的手机 logo 直接挤出屏幕外面了。这时候也是可以借助 JS 的力量。

1
2
3
4
5
6
7
8

// 软键盘弹起时候的定位处理
window.onresize = function (e) {
  if (e.target.outerHeight < $("body").height()) {
    $(".logo-wrap").css({ position: "static" });
  } else {
    $(".logo-wrap").css({ position: "fixed" });
  }
};

其实那么长的时间一直有种误区，觉得能用 CSS 解决的就拼了命用 CSS 解决，但是其实 JS 动态处理也不失为一种好方案，以后遇到问题多求助万能的 JS。