移動端的那些坑

首先我們來看乙個結構：

<
div 
class
='header'
>....
div>
<
div 
class
='main'
>....
div>
<
div 
class
='footer'
>
<
textarea
>
textarea
>
div>

其實就是最基本的上中下布局而已，問題是header和footer需要分別fixed到頭部和底部。

遇到的都知道在ios的safari裡面不支援position:fixed, 其實也不算是不支援，只是在軟鍵盤彈出來的時候使用fixed的元素就開始各種抽風了。

解決方法：在鍵盤彈出來之前按照正常的定位，使用fixed，彈出來的時候將footer這部分position:static;然後這樣footer就會跑向頁面的最下面了，然後再將頁面主動滾動到底部，當blur的時候再把footer設定回去。

解決方法：其實為啥使用了otextarea.focus()不管用，其實就是中間的這層ajax使用了非同步了。這樣瀏覽器以為這是兩件事，處於安全性考慮它給禁止了，然後將ajax改成同步的就ok了。

同樣在window.open()的時候也會遇到這個問題，解法相同。

本來是在失焦的時候觸發了乙個blur事件的東西，這樣就會出現問題。

解決方法：

(function()  else 
}, 1000);
}  loop_height();
})();

其實就是一直獲取頁面的可視高度，在鍵盤彈出來的時候鍵盤的部分不算innerheight;這樣在鍵盤收起來的時候就能知道了，如果感覺時間比較長可以把settimeout的時間改小一點，預設在少於300ms的時候感覺不出頁面的遲鈍。

解決方法：在focus事件的最後

$body.scrolltop(
$body.get(0).scrollheight + $("textarea").height()
);

就是讓頁面主動滾動下，反正textarea在最底部，那麼就把頁面滾動到最底下就成了。