正常狀態下
input focus軟鍵盤彈出時
問題描述:
頭部結構fixed,滾動到下部內容區域,input、textarea等focus彈出軟鍵盤時,頭部位置偏移被居中(該問題ios7 beta3已修復),當軟鍵盤關閉時,頭部結構位置又恢復正常
安卓手機下,fixed表現要比ios好,不會出現此問題
然而在移動端里,基本上所有手機,頁面滾動的時候,任何js都不會執行,所以尋找css的方法(且js方法比較消耗性能)
各類大網站的解決方法:一般是頁面上避免懸掛元素,或者有懸掛元素時,避免產生軟鍵盤彈出事件
目前css的解決方法:
頭部依舊fixed,中間有input、textarea等部分也fixed,width:100%,top值為頂部高度,bottom:0(如果頂部也fixed,則bottom值為底部高度),overflow:scroll
缺點:體驗差,有卡頓感,且雖然也能滾動,但是手機上顯示不出滾動條。
如果你有更好的解決方法,歡迎指點