HTML5培训

关于position:fixed在iphone上的问题

发布时间:2013年 12月 10日   |  作者:博看文思

一个WebApp要做的像原生App,经常需要一个固定位置的头部、工具栏之类的效果,在PC上常用position:fixed来实现。这个属性早在Android2.2就开始支持了,但是iOS5以前iphone是不支持这个属性的。不是ios不支持fixed,只是ios系统中fixed元素不是相对手机屏幕固定的,而是相对viewport这个虚拟视口固定的。所以对标签设置position:fixed后,在iOS5以前达不到我们想要的效果。当时也有很多替代方案,比如用jQueryMobile或是Sencha Touch来处理这个问题。

iOS5推出后,增加了对position:fixed的支持,但是却存在一个bug。当一个标签设置fixed定位后,进入页面第一次滑动屏幕时,fixed定位的元素会随着手指移动,并没有固定在屏幕指定位置,然后闪跳了一下回到正确位置上,之后就没有问题了。代码如下:    

<div id="footer">
    <ul>
        <li>
        </li>
    </ul>
</div>

解决办法也很简单

在页面加载之后执行window.scrollTo(0,0)即可。

好在,之后的iOS6已经修复这个bug。如今iOS7已经发布几个月,使用率超过74%。使用iOS5的人已经非常非常少,几个月之后可以慢慢忽略这个问题了。

相关文章
其他文章
提高网页加载速度---CSS
less语言特性(二) ——
less语言特性(一) ——
JavaScript中的一些坑
移动端性能大比拼:CSS
推荐大家使用的CSS书写规
 
 

版权所有:北京博看文思科技有限责任公司|(0.0446231365204s)