問題說明
移動端web的footer常常設計為fixed布局，但是在頁面鍵盤被拉起時fixed的布局會出現問題，自己試了下，在較低版本ios和部分安卓機上會有此問題。具體問題看圖示：
<body class="layout-fixed"> <!-- 可以滾動的區域 --> <main> <input type="text" placeholder="Footer..."/> <button class="submit">提交</button> </main> <!-- fixed定位的底部 --> <footer> </footer> </body>
樣式：
header, footer, main { display: block; } footer { position: fixed; height: 34px; left: 0; right: 0; bottom: 0; } main { margin-bottom: 34px; height: 2000px; }
藍色的footer是fixed定位，沒有喚起軟鍵盤的時候一切正常。
喚起軟鍵盤，在低版本ios里面就變成：（此問題在iphone4[ios7.1.2]出現，iphone6[ios9.3.1]已經修復）
這個是滑動了一部分頁面的效果，footer不聽話了，沒有留在最底部，跑中間了。
在某些安卓里面（如錘子SM705，安卓4.4.2）看這樣：
footer緊貼軟鍵盤，遮擋后面的區域。
產生原因：
鍵盤被拉起之后，fixed定位失效了，會跟隨頁面滾動，類似absolute了。布局亂了。
解決方法：
1.使用iscroll.js解決，庫已經修復了這些問題
2.問題是由於滾動區域可以滾動引起的，那么就指定main為可滾動區域，就不會影響到footer了：
改動：
<body class="layout-fixed"> <!-- 可以滾動的區域 --> <main> <div class="content"> <input type="text" placeholder="Footer..."/> <button class="submit">提交</button> </div> </main> <!-- fixed定位的底部 --> <footer> </footer> </body>
footer { position: fixed; height: 34px; left: 0; right: 0; bottom: 0; } main { /* main絕對定位，進行內部滾動 */ position: absolute; bottom: 34px; overflow-x:auto; overflow-y: scroll; } main .content { height: 2000px; }
這樣改了之后又有一個問題，就是滑動在手指離開觸屏之后會停，如果想恢復之前的特性，還需要做些處理：
main { /* main絕對定位，進行內部滾動 */ position: absolute; bottom: 34px; overflow-y: scroll; /* 增加該屬性 */ -webkit-overflow-scrolling: touch; }
但在 Android2.3+ 中，因為不支持 overflow-scrolling ，因此部分瀏覽器內滾動會有不流暢的卡頓。
3.其實還有更直接的解決方案，就是，在focus時給另外一個視圖(就是把footer隱藏掉)不顯示footer,在失去焦點時再顯示回來。這個雖然說簡單粗暴，但最有效方便。
4.另外的解決方案就是用js動態控制footer的樣式，和3的思路類似。需要加一段js,讓原來的元素變成absolute,失去焦點的時候再改回去：
.fixfixed { position:absolute; } $(document) .on('focus', 'input', function(e) { $this.addClass('fixfixed'); }) .on('blur', 'input', function(e) { $this.removeClass('fixfixed'); });
也可以改成static。
5.思路類似的方法
$(document) .on('focus','input',function(e){ $('#viewport').height($(window).height()+'px'); }) .on('blur','input',function(e){ $('#viewport').height('auto'); });
還有其他的一些移動端拉起鍵盤相關的問題，及解決方案：
- 有時候輸入框 focus 以后，會出現軟鍵盤遮擋輸入框的情況，這時候可以嘗試 input 元素的 scrollIntoView 進行修復。
- 在 iOS 下使用第三方輸入法時，輸入法在喚起經常會蓋住輸入框，只有在輸入了一條文字后，輸入框才會浮出。
- 有些第三方瀏覽器底部的工具欄是浮在頁面之上的，因此底部 fixed 定位會被工具欄遮擋。解決辦法也比較簡單粗暴——適配不同的瀏覽器，調整 fixed 元素距離底部的距離。
- 最好將 header 和 footer 元素的 touchmove 事件禁止，以防止滾動在上面觸發了部分瀏覽器全屏模式切換，而導致頂部地址欄和底部工具欄遮擋住 header 和 footer 元素。
- 在頁面滾動到上下邊緣的時候，如果繼續拖拽會將整個 View 一起拖拽走，導致頁面的“露底”。