移动页面开发——软键盘挡住页面内容怎么办？

刚刚才解决这个BUG，趁着记忆犹新，赶紧写下来。

问题：

在开发移动页面的时候，有一个form，位置比较靠下方。当点击输入框的时候，弹出的虚拟键盘会遮挡住网页的下部。这个问题并非在所有手机上都存在，只在某些安卓机上存在。iphone和部分安卓机是会自动将网页往上抬一部分来适应输入的。如下图所示。

  

原来的样子                                                                          希望的样子

解决思路：

1. 直接检测软键盘的弹出与收起。这个方法不行，在APP里面能做到，网页js不能直接检测。
2. 通过输入框的获得和失去焦点代替软键盘的弹出与收起。这个方法也不够严谨。比如，当用户输完姓名，点击小箭头收取输入法的时候，焦点依然聚焦在输入框中，导致应该往下的页面并没有往下。
3. 软键盘的弹出和收起都会触发window.onresize事件，我用一个变量存储判断每一次window.onresize事件发生的时候到底是软键盘弹出还是收起，就可以动态地修改页面的top值，这样就可以做到了，这个方法可行。

代码示例：

keyBoard = false;

window.onresize = function() {
<span style="white-space:pre">	</span>if (!keyBoard) {
	<span style="white-space:pre">	</span>$('#fifthsection').css('top','-50%');
	} else {
	<span style="white-space:pre">	</span>$('#fifthsection').css('top','0%');
	};
	keyBoard = !keyBoard;
};

//其中fifthsection就是这个页面的id

效果：