html5页面 安卓小键盘会影响定位的元素

之前做的一个项目   要求页面正好是一屏  然后确认框定位在最下面，是这样的

，设置高度为100%时，当输入框获得焦点的时候，安卓键盘会把最下面的那个按钮顶上去（这里的按钮用的是绝对定位哦）

我之前在网上找过一些解决办法：有一个办法是当输入框获取焦点的时候把按钮隐藏，失去焦点的时候显示，我试了这种办法太可行，因为当输入框获得焦点的时候，直接点击小键盘的收起的箭头，输入框是不会失去焦点的，这时候按钮就显示不出来了。

解决办法：页面加载的时候，计算浏览器的高度，然后把这个高度赋值给body元素

这样键盘弹出来的时候，按钮就不会被顶上来了

扩展

当页面在微信里打开的时候，在苹果手机上，点击过下一页之后，浏览器底部会出现一个类似工具栏的，用来前进和后退页面的（安卓的没有），这时候在苹果手机上又会出现滚动条，这时候我又把代码改成了这样

，当窗口大小改变的时候，重新计算视口的高度，这时候又出现问题了，在安卓手机上，键盘弹出来的时候，视口高度也重新计算了，按钮又顶上来了

改成这样就可以了，判断一下当前手机的系统，苹果手机的话，就重新计算，安卓的话就不重新计算，因为苹果手机键盘弹出来窗口大小不会改变的。（但是不知道有没有部分安卓手机会和苹果手机一样，有了浏览历史之后会产生类似工具条的东西·········o(╥﹏╥)o，欢迎大家一起讨论呀。。。。。。。。。。。）