前些日子，做了一個手機站的項目，有一個頁面是這樣的，
有一個固定（position:fixed）的頭部和底部導航，中間是一些表單內容，沒啥特別的。但是到了ios中，正常滾動頁面沒有問題，一旦觸發了文本框，出現輸入法小鍵盤時，就會變成了這樣：
就是，頭部和底部的位置錯亂了，不再fixed了。網上搜索了一翻，原來在ios的safari和webview中，對position:fixed的支持不是很好，在ios5之前甚至還不支持position:fixed。其解決辦法也有，一種是把中間部分也加上fixed，並加上overflow:scroll，測試后，不管用。
還有就是把頭部和底部寫成absolute，然后用js模擬fixed，免不了要獲取滾動的高度等一些麻煩語句，而且還是有bug，滾動時會跳動。
最后，只能采用一種不太理想的解決方法，算是某種意義上的忽略這個問題吧。就是當輸入框獲取焦點時，另頭部底部為relative，當輸入完成，失去焦點時，再重新變回fixed。其實，用戶在填寫文本框時，不大會注意其他信息，只會專心的操作輸入法小鍵盤，所以，這時頭和尾是不是固定的沒什么關系，輸完了，頁面又恢復了常態。思來想去，這是最可行，最簡單的解決辦法了。當然，是需要判斷一下是否是ios環境的。代碼如下：
<script>
$(document).ready(function(){
//修復ios輸入框獲取焦點時不支持fixed的bug
var isIOS=(/iphone|ipad/gi).test(navigator.appVersion);
if(isIOS){
$('.js_wrap').on('focus','input',function(){//js_wrap是中間含有文本框的區域
$('header').css("position","relative");
$('footer').css("position","relative");
}).on('focusout','input',function(){
$('header').css("position","fixed");
$('footer').css("position","fixed");
});
}
});
</script>