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

来源：互联网发布：淘宝宝贝摄影技巧编辑：程序博客网时间：2024/04/29 20:20

少叙闲言

如今手机换代都快赶上换衣服速度了，每每出新手机都是各种搭载最新系统，大家都在关心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>

如图：(模拟失效环境)

解析问题：

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>