ios下input focus彈出軟鍵盤造成fixed元素位置移位


正常狀態下

 

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

缺點:體驗差,有卡頓感,且雖然也能滾動,但是手機上顯示不出滾動條。

如果你有更好的解決方法,歡迎指點


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM