今天下班,突然發現同學在群里求救解決固定定位在移動端偏移的問題,本屌絲猛地一顫:那一天,我終於回想起來了,曾經一度被ios固定定位失效所支配的恐怖,還有被市場妹子一臉嘲諷的看着的那份屈辱...(本屌意淫一下巨人).
真是情況就是,ios對固定定位的支持有點奇葩,當固定定位的層里有input一類的能調動虛擬鍵盤的元素時,一旦用戶聚焦這些元素,固定定位的層級中的元素會發生位移,也就是俗稱的頁面錯亂了,本屌當時尋遍網上各種方案,試了大半天時間(其實,就是因為沒錢窮屌絲一枚,沒有水果手機,每次測試都要厚着臉皮去找市場妹子借人家的大水果機,耽誤時間),最后才選了個相對折中(厚着臉皮,就差給市場妹子跪下了,才在人家一臉無奈的表情中,接收了我那丑成狗的解決方案)的方案解決,其實最好的方案,就是盡量少在固定定位的層中用到input這類的元素.
其中用的就是絕對定位替換固定定位,同時,在最外面加一個層和其進行隔離,這里由於時間原因(現在依舊沒有蘋果手機,沒辦法演示),先不做具體介紹,以后會在這篇博文下面繼續續寫其中用的一些方案.
這里先放上絕對定位替換固定定位,方法很簡單,很好理解:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>絕對定位替換固定定位</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <style type="text/css"> *{padding: 0;margin: 0;} html,body{ width: 100%; height: 100%; } .wrap{ width: 100%; height: 100%; overflow: hidden; position: relative; } .content_box{ width: 100%; height: 100%; overflow: scroll; } .content{ height: 2000px; background-color: #3388FF; } .fixed_box{ width: 100%; height: 50px; position: absolute; bottom: 50px; text-align: center; line-height: 50px; background-color: #fff; color: #000; font-size: 24px; } /*這里就是多套一個層,最外層作為模擬固定定位元素的定位基准層,其和真正的內容層是兄弟元素,相當於在原有的內容層外套上了這樣的一個結構,實現絕對定位模擬固定定位*/ /*這種結構有點類似曾經寫過的輪播圖結構,思路都差不多,很好理解,可以用來解決ios對固定定位支持不好的情況,但是還需要結合具體情況進行優化*/ </style> </head> <body> <div class="wrap"> <div class="content_box"> <div class="content">原本內容</div> </div> <div class="fixed_box"> 固定定位 </div> </div> </body> </html>