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;
因为键盘向上弹出会压缩页面的高度,导致原页面底部绝对定位的图片跑上去,挡住输入框。
如下图 正常页面:
获取焦点页面后