h5页面软件盘把position为fixed和absolute的元素顶上来

  最近开发的时候遇到了一个很头疼的问题。就是在手机页面中点击输入框的时候,会弹出一个软键盘。这个时候在有些手机中底部position设置了absolute和fixed的值会被顶上来。

  网上查阅了一下原因,说是因为软键盘弹出的时候页面的高度的值被改变了,所以定位的元素就被挤到上面来了。

  然后在网上搜索了下解决办法,说是可以在元素获取焦点的时候让position值变为static,失去焦点的时候再变回来。的确靠这个方法一开始问题是解决了,但是后来发现安卓有一个很牛逼的功能,收起键盘,这个时候input框没有失去焦点,但是页面已经恢复原样了,这时候布局又乱了。

  最后在网上找到了另外一种用媒体查询的解决办法,当屏幕高度低于一定值得时候把底部栏隐藏。在我的项目中是很好的得到了解决,如果遇到相同问题的人可以尝试着用这种思路来解决。

@media screen and (max-height: 500px){
    .tips{
      display: none;
    }
    .call-adviser{
      display: none;
    }
}

  

posted @ 2018-06-05 20:16  北纬95度  阅读(961)  评论(0编辑  收藏  举报