在移动端H5开发中(关于安卓端position:fixed和position:absolute;和虚拟键盘冲突的问题,以及解决方案)

一、在开发移动端webapp时,我们经常会遇到这样的问题,当我们需要在页面底部固定一个logo或者说明时,往往会采用position:fixed进行固定定位或者absolute定位到最底部
这是一个很常规的操作,但是当页面上有input输入框时,当用户点击输入的时候,虚拟键盘被拉起,会造成我们在底部定位的内容,被谈起,而遮挡我们的输入框,造成无法输入或者界面布局不美观
像下面这样
在移动端H5开发中(关于安卓端position:fixed和position:absolute;和虚拟键盘冲突的问题,以及解决方案)

其实造成这种问题的原因是手机的问题,虚拟键盘的唤起,改变了窗口本来的高度,而不是我们的样式设置的有问题,明白了这点,解决方案其实很简单,这里我使用css的媒介查询,来监听窗口的高度,当窗口的高度小于某个值时,我们认为虚拟键盘被拉起,然后我们就可以单纯的借助css来处理这个问题

@media (max-height: 400px) {
    .openpaylogo {
    display: none;
  }
}

上一篇:【小贴士】虚拟键盘与fixed带给移动端的痛!


下一篇:Android开发案例 - 自定义虚拟键盘