在移動(dòng)web中使用position:fixed，會(huì)踩到很多坑，在我之前的一篇文章《移動(dòng)端web頁面使用position:fixed問題總結(jié)》中已經(jīng)總結(jié)了很多bug，但是在后續(xù)的開發(fā)中有關(guān)fixed的未知bug越來越多，我也在盡量的尋找解決方案。

這篇文章就來先解決一個(gè)坑，fixed元素的寬度自適應(yīng)。

當(dāng)橫屏?xí)r，fixed元素不能自適應(yīng)橫屏的寬度，bug表現(xiàn)如下：

這個(gè)bug主要在android自帶瀏覽器下出現(xiàn)，與手機(jī)型號(hào)和系統(tǒng)版本無關(guān)，幾乎所有android都無法幸免，在不同的手機(jī)下可能表現(xiàn)會(huì)有一點(diǎn)點(diǎn)差異，但都是同樣的bug。

導(dǎo)致bug的原因我不清楚，如有高人請(qǐng)指點(diǎn)。

下面這個(gè)解決方案在12款主流手機(jī)上測(cè)試通過（三星、小米、魅族、華為、中心等），如果還未完全解決可以回復(fù)這篇文章。

解決問題的關(guān)鍵就是：fixed元素內(nèi)部必須嵌套一個(gè)position:absolute元素，用來裝載內(nèi)容，目的就是為了讓內(nèi)容脫離fixed文檔流，屏蔽一些fixed的坑

別問我為什么，我也不知道為什么，但是這樣寫竟然神奇的好使了，如有高人請(qǐng)指點(diǎn)迷津。

我在下面的例子中聲明了兩種最常用的fixed元素：header和footer

position fixed header

header中我使用了float來定位左右兩邊的icon。右側(cè)icon一定不能使用position:absolute定位，如果使用了absolute，在一些android自帶瀏覽器下橫屏?xí)r，右側(cè)icon無法自適應(yīng)到右側(cè)，會(huì)出現(xiàn)與上面第二幅圖中差不多的bug。

<header><div class="fixed"><div class="wrap float"><div class="left-icon"><span class="glyphicon glyphicon-chevron-left"></span></div><h1>HEADER</h1><div class="right-icon"><span class="glyphicon glyphicon-calendar"></span><span class="glyphicon glyphicon-list"></span></div></div></div> </header>

?

position fixed footer

footer中是一個(gè)flex的布局，'display:flex'容器一定不要直接聲明到fixed元素下，必須使用'position:absolute'容器包裝一層。

<footer><div class="fixed"><div class="wrap flex"><a href="#"><span class="glyphicon glyphicon-picture"></span></a><a href="#"><span class="glyphicon glyphicon-film"></span></a><a href="#"><span class="glyphicon glyphicon-qrcode"></span></a></div></div> </footer>

解決方案DEMO：http://jsbin.com/omaCOSir/latest

題外話

一個(gè)placeholder自適應(yīng)bug，頁面中使用<input>標(biāo)簽并且有屬性placeholder，在頁面橫屏再轉(zhuǎn)回豎屏?xí)r，會(huì)導(dǎo)致頁面無法自適應(yīng)，無論是android還是ios都會(huì)中招。

解決方法是，在<input>外層容器中加overflow:hidden，這個(gè)bug我沒有截圖，大家可以自測(cè)。

?

轉(zhuǎn)自：https://github.com/maxzhang/maxzhang.github.com/issues/11

轉(zhuǎn)載于:https://www.cnblogs.com/Megasu/p/4104096.html

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的移动Web开发实践——解决position:fixed自适应BUG的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。