其實在安卓機上fixed的適應性要遠遠比ios上好，真是接地氣啊哈哈。之前第一次遇到這個問題的時候非常驚訝，那時候在用sui mobile的元件庫，裡面就有底部導航欄，用了fixed。但是隨著螢幕向上滾動，超過一定距離，這個底部導航欄竟然也跟著上去了。並且在我的安卓機上是沒多大影響，但是在ios上就這樣了。不過我同事的安卓機竟然比在ios上還誇張。
什麼原因導致的？
經過我多方調研，其實移動端在早些年以前已經相容了fixed，但是為什麼現在還會出現這樣的問題？
原來是移動端上還存在乙個bug，就是如果乙個元素的position是fixed，而這個元素內部的元素也設定了定位，而且不管是position是什麼，都會導致fixed失效，尤其是ios上。
移動端虛擬鍵盤與fixed定位失效問題！
移動端虛擬鍵盤出現的條件是 文字框 文字類 獲得焦點 彈出鍵盤後原先定位與底部的東西會被虛擬鍵盤頂上去，樣式錯亂！首先我們會想到監聽focus和blur事件，但是會有bug，虛擬鍵盤有自帶的收起鍵盤，這樣輸入框還是聚焦事件，並沒有觸發blur事件。所以會導致失效的。我們可以換乙個思路。監聽改變瀏覽器...
fixed在移動端的坑
fixed在某些情況下可能導致容器內的子元素的1px邊框線消失，即使使用z index也無法解決。解決方法 可以使用translatez屬性來解決 fixed定位的容器內不能帶有input，這是常見的bug。解決方法 在input聚焦的時候去掉fixed定位狀態，改為absolute。fixed 可...
移動端fixed相容問題
最近做移動端頁面，有個需求類似下圖 底部導航用fixed定位時在部分ios版本中會有問題 1.上滑是底部會跟著滑動，手指鬆開時才會又回到底部 2.軟鍵盤喚起的情況下，也會出現許多莫名其妙的問題 網上搜了下，ios確實對fixed相容不是很好 1 doctype html 2 html 3 head ...