手机移动端布局，页面高度被弹出的小键盘顶起

    今天给大家分享一个手机移动端常见的小问题，也是我在实际项目中被坑到过的问题。

    近些年来移动端开发越来越重要，作为一名合格的前端开发人员，相信大家或多或少都已经写过一些移动端的页面。

    那么不知道大家在移动端点击input输入框时是否遇到页面整体高度被手机弹出的小键盘给顶起来了，从而导致一些定位的元素也发生了改变，如果你的问题已经解决那么恭喜你~！ 如果还没有遇到或者遇到了还没有解决的小伙们可以看看我用到的方法。

首先因为要适配安卓跟苹果各个屏幕不同尺寸的原因，我选择同rem来搭建整个页面，并且页面整体高度用100vh; 使得页面不管在什么屏幕下都能很好的适配呈现出来。

代码如下：

	var pixclPatio = 1 / window.devicePixelRatio;
	document.write('<meta name="viewport" content="width=device-width,initial-scale='+pixclPatio+',minimum-scale='+pixclPatio+',maximum-scale='+pixclPatio+',user-scalable=no" />');
			
	var html = document.getElementsByTagName('html')[0];
	var pageWidth = html.getBoundingClientRect().width;
	html.style.fontSize = pageWidth / 16 + 'px';

因为页面有input输入框并且底部需要有css3动画，因此我把整体动画元素以body底部为参考点来进行子绝父相的定位

结果在完成页面整体效果并在手机上测试时，点击输入框页面整体高度就被弹出的小键盘顶上去，从而导致我的动画位置也被改变，直接覆盖了input输入框。

然后在网上搜了一大堆有的说直接给高度定死，但需要适配不同手机尺寸所以行不通。

有的说直接用js获取页面高度 $(document).height();        这个方法应该可行于是我继续试，结果因为这个方法是直接获取整个文档的高度，

所以导致直接高度超标了，还是不行。

最好本人灵机一动，既然是可行的，只是高度过于大，那么我是不是可以用 $(window).height();代表了当前可见区域的大小  。

代码如下：

var hrt = $(window).height(); //获取当前可视区域的高度存到hrt的变量里。
console.log(hrt);
window.onload=function(){ //在页面整体加载完毕时
	$('body').height(hrt+'px'); //把获取到的高度直接赋值给body
}; 	

最后完美解决页面高度被小键盘顶起的问题，安卓苹果都有效。