移動Web開發實踐——解決position:fixed自適應BUG

標籤：android   http   io   ar   os   使用   sp   strong   div   

在移動web中使用position:fixed，會踩到很多坑，在我之前的一篇文章《移動端web頁面使用position:fixed問題總結》中已經總結了很多bug，但是在後續的開發中有關fixed的未知bug越來越多，我也在盡量的尋找解決方案。

這篇文章就來先解決一個坑，fixed元素的寬度自適應。

當橫屏時，fixed元素不能自適應橫屏的寬度，bug表現如下：

這個bug主要在android內建瀏覽器下出現，與手機型號和系統版本無關，幾乎所有android都無法倖免，在不同的手機下可能表現會有一點點差異，但都是同樣的bug。

導致bug的原因我不清楚，如有高人請指點。

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

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

別問我為什麼，我也不知道為什麼，但是這樣寫竟然神奇的好使了，如有高人請指點迷津。

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

position fixed header

header中我使用了float來定位左右兩邊的icon。右側icon一定不能使用position:absolute定位，如果使用了absolute，在一些android內建瀏覽器下橫屏時，右側icon無法自適應到右側，會出現與上面第二幅圖中差不多的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中是一個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

題外話

一個placeholder自適應bug，頁面中使用<input>標籤並且有屬性placeholder，在頁面橫屏再轉回豎屏時，會導致頁面無法自適應，無論是android還是ios都會中招。

解決方案是，在<input>外層容器中加overflow:hidden，這個bug我沒有，大家可以自測。

 

轉自：https://github.com/maxzhang/maxzhang.github.com/issues/11

移動Web開發實踐——解決position:fixed自適應BUG