安卓手机虚拟键盘定位position:fixed问题

最新推荐文章于 2023-08-10 18:45:00 发布

xiazeqiang2018

最新推荐文章于 2023-08-10 18:45:00 发布

阅读量2.3k

点赞数 1

分类专栏：个人技术类

本文链接：https://blog.youkuaiyun.com/xiazeqiang2018/article/details/81319366

版权

个人技术类专栏收录该内容

23 篇文章

订阅专栏

本文探讨了在安卓设备上使用position:fixed时遇到的布局问题，特别是在虚拟键盘弹出时，固定在底部的元素会被键盘遮挡。通过监听窗口大小变化，调整元素定位为static或absolute，解决了此问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在安卓手机上面会出现position:fixed固定定位的问题，当用户点击搜索框的时候，手机的虚拟键盘会把固定在底部的div顶到手机虚拟键盘的正上方，查询后发现是虚拟键盘调用时浏览器高度被压缩了，根据这个特性我们可以通过监听浏览器窗口的高度改变元素的定位或者显示隐藏。
代码如下：

 windowInnerHeight = window.innerHeight; //获取当前浏览器窗口高度
    $(window).resize(function(){
        if(window.innerHeight < windowInnerHeight){
 $('.footer').css('position','static');//也可以在css文件夹写个类名，然后相对应的removeClass和addClass既可
        }else{
        $('.footer').css('position','absolute');
        }
      });