问题重现
原始页面：页面中有header、main、footer三部分，其中 header 和 footer 通过 position: fixed; 定位在浏览器顶部和底部。
其中，footer 中有一个input 输入框。
点击 input 框使之获取焦点，唤起虚拟键盘，正常页面效果如下：
注：在ios系统唤起软键盘，键盘和底部输入框之间有一块空白间距。
但是偶尔会出现软键盘挡住input框的情况，如下：
针对此问题，目前没有十分有效的方法，只能通过js调整input输入框的位置，使之出现在正常的位置。
解决方法
scrollIntoView(alignWithTop): 滚动浏览器窗口或容器元素，以便在当前视窗的可见范围看见当前元素。
alignWithTop 若为 true，或者什么都不传，那么窗口滚动之后会让调用元素的顶部与视口顶部尽可能平齐；
alignWithTop 若为 false，调用元素会尽可能全部出现在视口中，可能的话，调用元素的底部会与视口顶部平齐，不过顶部不一定平齐。
支持的浏览器：IE、Chrome、Firefox、Safari和Opera。
该方法是唯一一个所有浏览器都支持的方法，类似还有如下方法，但是只有在Chrome和Safari有效：
scrollIntoViewIfNeeded(alignCenter)
scrollByLines(LineCount)
代码如下：(使用setTimeout注意修改this值)
再次测试，效果如下：
相比于input被挡住，突兀地出现在页面中间更加可以令人接受
针对input输入框被虚拟键盘挡住的问题，还有一个类似的解决方案：
当软键盘被唤起是，使用 scrollTop() 方法使input元素滚动到指定的位置，但是滚动的具体数值需要调试才能给出，所以这里就不再演示了。