【一天一道兼容性】之——IOS4及以下fixed失效

少叙闲言

如今手机换代都快赶上换衣服速度了,每每出新手机都是各种搭载最新系统,大家都在关心android5.0该不该叫切糕?IOS的最新版啥时候出完美越狱……,可偏偏就总有些人抱着旧系统来测你的页面,没有那金刚钻,还非要揽这瓷器活?!android碎也就那么地了,你苹果来凑什么热闹啊……,今儿接到个任务,说是领导家有个亲戚,上我们时候首页的一个fixed元素在ios旧版本中失效,让做兼容……,好吧,为了什么鬼亲戚,我只能蝴蝶效应了……

正题

demo:

 

<style>
  html, body, div, p {margin: 0;padding: 0; }
  body {height: 3000px;background-color:#a55;}
  #p {width: 100%;height: 50px;background: #5a5;position: fixed;bottom: 0;}
</style>
<body>
    <p id = "p"></p>
</body>

 

如图:(模拟失效环境)

【一天一道兼容性】之——IOS4及以下fixed失效

 

解析问题:

1:IOS5以下版本的safari不支持fixed

2:android据说2.0以上就支持fixed,但我测试时候发现,2.2的i9000上,测试页好使,但线上大量数据时候失效,可能由于搭载的硬件关系导致。

 

解决办法:

利用position:absolute;bottom:0和scroll事件进行模拟fixed,另外,当触发touchstart时候,浏览器会暂停页面渲染,也就是我们看到的截屏效果,所以,为了滚动时候不影响美观,所以先将其隐藏掉,事后再放出来。

 1 <script>
 2      var android2_3up = navigator.userAgent.match(/Android [2-9].[3-9][.\d]*/);
 3         var ios5up = navigator.userAgent.match(/OS [5-9]_\d[_\d]*/);
 4         var isMobile = !!navigator.userAgent.match(/AppleWebKit.*Mobile.*/);
 5         if (isMobile && !ios5up || !android2_3up) {//匹配ios4 或android2.3以下
 6             var p = document.getElementById("p");
 7             p.style.display = "absolute";
 8             function handler(event) {
 9                 var top = window.innerHeight + document.body.scrollTop - 50;
10                 p.style.top = top + "px";
11                 p.style.opacity = 1;
12             }
13             function touchstart(event) {
14                 p.style.opacity = 0;
15             }
16             function touchend(event) {
17                 p.style.opacity = 1;
18             }
19             document.addEventListener("scroll", handler, false);
20             document.addEventListener("touchstart", touchstart, false);
21             document.addEventListener("touchend", touchend, false);
22         }
23 </script>

 

 

 

 

 

你可能感兴趣的:(fixed)