【一天一道兼容性】之——IOS4及以下fixed失效
少敘閑言
如今手機(jī)換代都快趕上換衣服速度了，每每出新手機(jī)都是各種搭載最新系統(tǒng)，大家都在關(guān)心android5.0該不該叫切糕？IOS的最新版啥時(shí)候出完美越獄……，可偏偏就總有些人抱著舊系統(tǒng)來(lái)測(cè)你的頁(yè)面，沒(méi)有那金剛鉆，還非要攬這瓷器活？！android碎也就那么地了，你蘋(píng)果來(lái)湊什么熱鬧啊……，今兒接到個(gè)任務(wù)，說(shuō)是領(lǐng)導(dǎo)家有個(gè)親戚，上我們時(shí)候首頁(yè)的一個(gè)fixed元素在ios舊版本中失效，讓做兼容……，好吧，為了什么鬼親戚，我只能蝴蝶效應(yīng)了……
正題
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>?
如圖：(模擬失效環(huán)境)
?
解析問(wèn)題：
1：IOS5以下版本的safari不支持fixed
2：android據(jù)說(shuō)2.0以上就支持fixed，但我測(cè)試時(shí)候發(fā)現(xiàn)，2.2的i9000上，測(cè)試頁(yè)好使，但線上大量數(shù)據(jù)時(shí)候失效，可能由于搭載的硬件關(guān)系導(dǎo)致。
?
解決辦法：
利用position：absolute；bottom：0和scroll事件進(jìn)行模擬fixed，另外，當(dāng)觸發(fā)touchstart時(shí)候，瀏覽器會(huì)暫停頁(yè)面渲染，也就是我們看到的截屏效果，所以，為了滾動(dòng)時(shí)候不影響美觀，所以先將其隱藏掉，事后再放出來(lái)。
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>?
?
?
?
?
轉(zhuǎn)載于:https://www.cnblogs.com/ccto/archive/2013/04/18/3029237.html
總結(jié)
以上是生活随笔為你收集整理的【一天一道兼容性】之——IOS4及以下fixed失效的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Http协议中的各种长度限制总结
- 下一篇： AUTOCAD自学教程一