文字输入键盘弹出导致页面布局出错

2018-05-07

问题

有时当我们写完一个H5的表单页面,在浏览器手机模式测好,以为完事的时候,结果还是会收到用户提交的bug,页面出错了!!!
用户在手机上点击输入框,键盘弹出,使页面高度改变,导致页面布局错误。(部分手机型号)

实现代码

$(document).ready(function () {
  $('body').height($('body')[0].clientHeight);
});

当手机软键盘弹出时,有些型号的手机(IOS没问题,部分Android有)的屏幕会被键盘占去一部分,导致页面高度改变。上面的代码是在页面加载完毕后,将body的高度设置成设备屏幕的高度,这样即使键盘弹出,页面的高度也不会改变。

Tags: css3h5