解决安卓手机键盘弹出时会把背景或百分比定位的布局压缩的问题

Posted 2020-10-07 javenLee

做移动端页面时经常遇到以下案例，在有背景的页面上写表单，而且底部为了适应不同手机还得运用绝对定位，因为通常是把容器高度设为了100%，这时在安卓手机上弹窗软键盘时就会把背景图片及其他东西挤压上去，解决方法如下：

在css样式中把大容器定义为fixed布局

  .wrap{ position:fixed;left:0;top:0; }

在js中强制把页面的高度覆给他，就相当于自动撑开

var x =document.body.clientWidth; //查询设备的宽度

var y =document.body.clientHeight; //查询设备的高度

$(".wrap").width(x); //

$(".wrap).height(y); //把设备的宽高赋给页面