解决移动端弹出键盘将页面往上顶，导致页面整体往上，显示不全

[ScoutYin]

问题描述

最近在做移动端项目（框架使用Vue）时，发现一个问题：在移动端真机上点击一个文本输入框，弹出键盘，为了使键盘不挡住输入框，页面被往上推了，输入框失去焦点后，键盘收起，咦？页面怎么卡在那了，上面的都看不见了，试着滑动也没办法让它回归原位。

解决方案

最终解决方案是：给input监听blur事件，在失去焦点时重置body的scrollTop就好了，因为对input做了一次组件封装，只需要在blur回调函数中加上如下一段代码就ok了，这也体现出组件复用的好处，我使用input的时候就用封装过的input组件就行了，不用担心在每个用到input的时候都要手动加上这些代码：

onBlur () {
    // 其它代码...
    document.body.scrollTop = 0
}

扩充部分

移动端meta标签之viewport

如果<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">中没有user-scalable=no可能还会导致键盘弹出时页面比例变大，使页面看起来向左上方偏移了，所以不要忘了user-scalable=no。