webapp中绝对定位/固定定位与虚拟键盘冲突的问题

Question

webapp中最底下一般会有一些功能按钮，用absolute或者fixed固定在最底下，这个在pc端不会有什么问题，但是移动设备有时候会弹出虚拟键盘，导致布局有一定混乱，而且在闪现的时候容易引起误操作。

不知道大家有什么综合的解决方案去解决这个问题？

Answer 1

在移动平台上用 fixed 定位方式把内容定位到屏幕底部就是作死，不要这么设计，为 PC 和移动平台设计两套吧。

另外有个取巧的做法，在移动平台上可以监听窗口大小变化，然后可以在键盘弹出来的时候临时隐藏底部内容，优化体验。

Answer 2

用媒体查询：

@media (max-height: 400px) { 
  .footer {
    display: none;
  }
}

Answer 3

刚刚也遇到了这个问题，参考此答案提了一个解决方案，还不错，分享一下:
虚拟键盘在点击input和textarea的时候会出现，所以点击input事件是虚拟键盘出现，input失去焦点是虚拟键盘隐藏。
所以当虚拟键盘出现时，将fixed定位转化为static，当虚拟键盘隐藏时，将static还原为fixed，就可以解决破坏布局的问题了。

$('input').on('click',function( ){
    $('#bottom').css({'position':'static'})
});
$('input').on('blur',function( ){
    $('#bottom').css({'position':'fixed'})
});

Answer 4

input onfocus hide

Answer 5

$('body,html').height(document.body.clientHeight);

进入页面的时候就把高度固定住，这样虚拟键盘打开页面高度不会变化，你的布局也不会乱

Answer 6

按照采纳的答案来搞就是：监听窗口大小变化 视窗高度 小于 页面高度时 清除定位
`
window.onresize = function(e){

if(e.target.outerHeight < $('body').height()){
    $('#bottom').css({'position':'static'});
}else{
    $('#bottom').css({'position':'fixed'});
}

}`