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

标签：osi   static   网上   pre   收起键盘   tip   点击   absolute   input   

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

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

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

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

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

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

标签：osi   static   网上   pre   收起键盘   tip   点击   absolute   input   

原文地址：https://www.cnblogs.com/wqc5730/p/9141672.html