解決ios、微信移動端的position: fixed; 支持性不好的問題
在chrome中的多個部分使用了position: fixed之后,都可以正常的布局,但是放在微信上卻出現了不能正常顯示的問題(第一個問題)。
並且使用了postion: fixed; 的一個種類名稱欄在微信下下滑不了,而body是可以的,確實讓人很郁悶(第二個問題)。
對於第二個問題,我們可以采取的方式是使得微信不能下滑暴露出 powered by ... 的字樣。 但是對於第一個問題,確實沒有很好的解決方法。 所以就在網上找了相關的資料,希望可以借鑒成功。
相關問題一:Web移動端Fixed布局的解決方案
這個問題中提到的問題是對於fixed布局的頁面,如果同時又有input框獲取焦點,本身沒有問題,但是軟鍵盤一旦起來,就會出現問題了。
解決辦法:避免input和fixed的聯合使用, 使用iscroll.js這種第三方庫也可以可以解決的。
相關問題二(推薦):移動端web頁面使用position:fixed問題總結
解決了部分瀏覽器不支持fixed、focus出錯等問題。
相關問題三: 關於蘋果手機微信端 position: fixed定位top導航欄問題
同樣也是與input獲取焦點的相關問題。
相關問題四: fixed在微信下的BUG
與-webkit-overflow-scrolling有關。
禁用下拉暴露黑底的功能
https://github.com/yuanzm/preventoverscrolljs
ios的手機,如果對某些在頂部的手機設置了 position: fixed, 那么微信部分是不能下拉的。 而安卓機是可以正常使用的。 所以,我們可以選用posution: absolute來替代。