移动端android/ios低版本不兼容position:fixed属性

最新推荐文章于 2023-08-24 19:57:31 发布

原创最新推荐文章于 2023-08-24 19:57:31 发布 · 3.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #ios #兼容问题

兼容性同时被 2 个专栏收录

5 篇文章

订阅专栏

IOS

2 篇文章

订阅专栏

本文针对移动端开发中iOS系统下小键盘激活时头部底部位置浮动问题，提供了多种解决方法，并详细介绍了通过监听窗口尺寸变化来调整头部底部位置的完美解决方案。

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

移动端开发仿app头部底部固定设置position:fixed，android2.2以上已经实现。但是在ios8以下系统，当小键盘激活时，都会出现位置浮动问题。如图：

如何解决：
查阅资料之后想到一下几种解决方法
1，使用position：absolute模拟

    <script type="text/javascript">

        window.onscroll=function(){

        $(".fixed").css("top",$(window).scrollTop());

       $(".foot").css("top",$(window).scrollTop()+$(window).height());

    }

    </script>

问题来了：滑动页面时头部底部div会有明显的抖动。
2，判断当前获得焦点元素是input则隐藏div改为position：absolute

    <body onload=setInterval("a()",500)>
    <script type="text/javascript">

      function a(){

        if(document.activeElement.tagName == 'INPUT'){    

          $(".fixed").css({'position': 'absolute','top':'0'}); 

           } else {  

             $(".fixed").css('position', 'fixed');  

            }

          }

      </script>

问题来了:不停监控dom，消耗资源。如果input个数较少，可在input里面添加onfocus事件好一些。但是如果是底部固定div此方法好像不太给力。
3，插件iscroll.js个人感觉不是很好用。可能方法不对，jQuery Mobile 没尝试，感觉会增负担。
4，重点来了：
只需要在中间部分外层div添加css样式position:fixed;top:50px; bottom:50px;overflow:scroll;就可以实现效果，无需插件。可拷贝下面代码运行。
但是，当点击手机输入法的向下箭头时还会有问题。
5.完美的解决办法：

var windowInnerHeight= window.innerHeight; //获取当前浏览器窗口高度

$(window).resize(function(){

if(window.innerHeight < windowInnerHeight){
 $('.footer').css('position','static');//当内部高度变小时
}else{

$('.footer').css('position','absolute');

}
      });