H5登录页 键盘挡住输入框的另类解决方案

H5登录页 键盘挡住输入框的另类解决方案

登录页有时候为了做的漂亮底部会有些图片或者其他样式，在大屏或者其他分辨率较高的手机端正常的情况下，会碰到手机分辨率低或其他小屏安卓机键盘挡住输入框的情况。常规解决方案有js获取高度做判断啊，input获取焦点后改变样式类啊什么的。最近笔者发现了一个偏方，对界面要求不那么高的情况下可以试试：

方法

只用了一行css，min-height:500px

原理

登录页容器原css参考如下：

position:fixed;

width:100%;

height:100%

left: 0;

right: 0;

top: 0;

bottom: 0;

里面有一图片绝对定位在底部，css参考如下：

width: 100%;

height: 120px;

bottom:10px;

left:0;

position: absolute;

因为键盘向上弹出会压缩页面的高度，导致原页面底部绝对定位的图片跑上去，挡住输入框。

如下图 正常页面：



获取焦点页面后

（划重点：）这时候，只要在页面容器外层加个min-height:500px（随便写个几百像素）即可。因为有了最小高度，键盘弹出后也不会被压缩，只是键盘会盖住无关紧要的底部图片！要求不那么高的可以试试！！！完美解决！！