webapp中最底下一般会有一些功能按钮,用absolute或者fixed固定在最底下,这个在pc端不会有什么问题,但是移动设备有时候会弹出虚拟键盘,导致布局有一定混乱,而且在闪现的时候容易引起误操作。
不知道大家有什么综合的解决方案去解决这个问题?
$('body,html').height(document.body.clientHeight);
进入页面的时候就把高度固定住,这样虚拟键盘打开页面高度不会变化,你的布局也不会乱
input onfocus hide
刚刚也遇到了这个问题,参考此答案提了一个解决方案,还不错,分享一下:
虚拟键盘在点击input和textarea的时候会出现,所以点击input事件是虚拟键盘出现,input失去焦点是虚拟键盘隐藏。
所以当虚拟键盘出现时,将fixed定位转化为static,当虚拟键盘隐藏时,将static还原为fixed,就可以解决破坏布局的问题了。
$('input').on('click',function( ){
$('#bottom').css({'position':'static'})
});
$('input').on('blur',function( ){
$('#bottom').css({'position':'fixed'})
});
用媒体查询:
@media (max-height: 400px) {
.footer {
display: none;
}
}
在移动平台上用 fixed
定位方式把内容定位到屏幕底部就是作死,不要这么设计,为 PC 和移动平台设计两套吧。
另外有个取巧的做法,在移动平台上可以监听窗口大小变化,然后可以在键盘弹出来的时候临时隐藏底部内容,优化体验。