問題根源 安卓手機跟蘋果手機 獲取的body 高度不一樣 所以導致了 當軟鍵盤出現的時候 安卓手機上面頁面並沒有向上滾動,所以就擋住了下面的輸入框,這樣的用戶體驗非常不好,最開始寫好的頁面的時候不會出現這種情況,安卓端用戶使用默認的輸入法,點擊輸入框的時候頁面會跟着向上移動 ,起初問題出現在 boss的蘋果手機搜狗輸入法中,軟件出現的時候頁面沒有向上滾。在高質量代碼群里面問了,當時就有人說安卓有問題 ,我當時還不信。只是一方面想着解決boss手機上的問題 ,畢竟國內還是挺多人用搜狗的。解決是必須的,花了將近一天的時間在各個群里問了,也百度了,試了好幾種都不行。高質量群里的逆天 是個對前端非常熱愛,碰到問題都是非常熱情幫忙解決。幫我寫了一個demo 調試這個擋住的問題。
他一開始的解決思路 就是當輸入框獲取焦點時 讓頁面滾動到相應的位置,跟回到頂部的思路差不多,代碼如下
//軟鍵盤遮掉輸入框處理方法
$("input").focus(function(){
var num = $(this).offset().top-header_h;
$("html,body").animate({scrollTop:num},800);
}); //關鍵代碼
把這段代碼加到頁面上,一開始會滾動,而且有效果。不知道什么時候莫名其妙在安卓手機效果就沒了。而且一動不動。於是乎又是各種百度各種群里發問題。最終還是如最開始逆天所說的安卓軟鍵盤擋住了的問題。按照他的說法就是 安卓手機和蘋果手機body或者是外層div高度值不一樣。安卓手機body或者是外層高度的高度要重新賦值,安卓手機高度要通過獲取window的高度 然后賦值給body或者最外層div 代碼如下
var win_h = $(window).height(); //關鍵代碼
$("body").height(win_h); //關鍵代碼
就是這樣兩句話,就解決了我要解決的問題,這個應該是基礎問題,也是經驗問題。因為不知道為什么安卓手機軟鍵盤喚起頁面不上滾的原因在哪。還有就是最開始使用了獲取焦點不滾動為什么不滾動我也不知道原因出現在哪里,不知道跟不跟這個body或者外層div的高度有關系。總而言之,基礎還是很薄弱。經驗也不豐富。真的要靜下心來學習,要多勤快測試測試各種問題。很多時候碰到問題就是束手無策,而且有時候方向都不對,試了又試。以后啊,還是要多學基礎,多積累經驗。