如果您有過移動端的開發經驗，那么您是否碰到過這樣的問題，一個頁面有輸入框，當這個輸入框聚焦時，輸入框在IOS下，被移動到手機屏幕的當中去了，而在Android端，有些瀏覽器的輸入框，會被鍵盤蓋住。
1：前言
接下來就以最常見的頂部和底部固定輸入框來看一下，問題的來源，以及折中的解決方案
輸入區域，在移動端基本上，只用於三種情況
1：固定在頂部的
2：固定在底部的
3：在文檔流中的
我們這里，首先以固定在頂部和底部的為例，來看看它的一些表現。
而這里的問題展示，也是通過一些示例來展示，而在每個示例中，都是使用的最簡單的元素，最簡單的布局，來展示這個問題
2：文檔高度沒有超過一屏
大部分的頂部輸入框，出現的情況都是不會超過一屏的，如果超過一屏，那么大部分的處理方式就是，這個頂部的輸入框是在文檔流內部的，不是一直固定在頁面頂部的，而當輸入框點擊之后，直接跳轉到一個單獨的搜索頁，而搜索頁的內容，一般都是不太多的，基本只包含一些提示信息，並且，在搜索頁的輸入框，也不是那種固定在頂部的。就比如流量那么大的“淘寶的H5頁面”;
這里加一句題外話，其實在移動端的布局中，已經很少有局部是固定布局的了，尤其是一些不常用的功能，原因可以想象為，移動端的可視區域就那么一些，如果很多元素采用了固定布局，那么有效的內容元素，可以展現的就更少了，所以一般除非必要，是不會出現固定布局這樣的情況的？
扯了那么多，接下來就先看看示例吧
如果您在PC端，想要移動端測試一下，請掃碼：
如果您在移動端，或者在PC端，想要看下源代碼：滾動區域，不大於一屏的DEMO
我個人有在IOS下，和Android下測試一下，結果如下：
上輸入框，在IOS和Android下，都正常
下輸入框，在IOS下，會彈到鍵盤上面，雖不是緊挨着鍵盤，但是情況可以接受。
下輸入框，在Android的某些瀏覽器下，會被蓋住，在大部分瀏覽器下，都是緊挨着鍵盤的
3：文檔高度超過一屏
有時候，會有這么一種情況，我固定在頂部和底部的輸入框，就是需要在一個很大的頁面中，有一個固定在頂部或者是底部的輸入框，比如一些實時聊天的界面，或者是彈幕交互的界面。
但是呢，除了這些固定之后，其他的一些元素，是占據了很大文檔空間的，就是說，其他的元素高度，是超過一屏的高度的，所以來看看這個時候的情況：
如果您在PC端，想要移動端測試一下，請掃碼：
如果您在移動端，或者在PC端，想要看下源代碼：滾動區域，大於一屏的DEMO。
該情況，如果您是Android機的話，這里可以不做測試，因為其展示形式，和文檔不超過一屏的展示形式，基本一樣的，該出什么問題，還是有什么問題，這里主要是IOS下的問題，而且問題非常嚴重。
如果您沒有發現問題，那么就把頁面滾動到最底部的時候，點擊頂部的輸入框，把頁面滾動到最頂部的時候，點擊固定在底部的輸入框，就可以看到問題了。
我看到的結果，可以描述如下：
Android：上輸入框表現正常，下輸入框：相同的問題，有的表現正常，有的會被鍵盤蓋住
IOS下：上輸入框，會把body的滾動區域，整體滾動到最上面，導致錯位
IOS下：下輸入框，會把body的滾動區域，整體滾動到最下面，導致錯位
當body的區域，大於一屏時，基本IOS下的輸入框上下固定，是不可用的
4：小結
我們來總結一下，上面兩個示例的情況：
1：輸入框是固定在頂部和底部的，使用的是fixed的
2：其他的內容區域是普通文檔流，文檔高度試了兩種：不超過一屏和超過一屏
這里因為是給的最簡單的示例，那么就代表着，基本不會受到其他屬性的影響，那么問題就來了：
首先，輸入框固定在頂部和底部，使用fixed是沒有問題的，不然無法固定，也不能實時的去計算，而且在IOS下，當頁面在滾動的時候，為了有更好的滾動體驗，是停止CSS渲染和JS的執行的，所以也不能實時的去計算，然后進行固定，所以使用fixed的固定，是必須要使用的。
那么，問題就只剩下兩個了：
1：內容區域是普通文檔流
2：內如區域的高度，超過一屏
就這兩個問題，我們前面已經看到了一種情況，就是當文檔不超過一屏時，在IOS和Android下的表現效果，還是可以接受了，除了在Android的某些瀏覽器下，底部輸入框會被鍵盤蓋住之外，並沒有其他的不好的效果，尤其是頂部輸入框，都是可以完美的使用。
所以，這里的問題解決方案，就只剩下了一個，那么就是控制高度最多顯示為一屏的內容，這個也是我認為的，一個不錯的解決方案，移動端單屏布局方式。
雖然是單屏，但是內容區域，總不能限制為一點點內容了，所以，這里剩下的解決方案，就只剩下了一種，內容區域也使用固定布局
重新多添加一層div，該元素把所有非固定布局的元素包含在內（固定布局的不要包含，有問題的，這個在之后再寫一篇文章，來說明這個問題）。讓這個div占據屏幕的可視區域，但是，又不讓這個區域超出一屏的內容。所有的非固定元素，都在該div內部滾動，那么接下來，就看看效果如何吧。
5：單屏布局方式–解決方案
其主要的HTML和CSS如下：
<div class="input-top"> <input class = "input" type = "text" placeholder = "頂部輸入框" /> </div> <div class="input-bottom"> <input class = "input" type = "text" placeholder = "底部輸入框" /> </div> <div class="wrapper"> 該元素區域，占據很大的高度 </div>
.wrapper{ position:absolute; top:30px; left:0px; right:0px; bottom:30px; overflow:auto; -webkit-overflow-scrolling : touch; }
查看示例效果：
如果您在PC端，想要移動端測試一下，請掃碼：
如果您在移動端，或者在PC端，想要看下源代碼：單屏布局方式-解決上下輸入框固定在頂部和底部的DEMO
表現效果：
Android：上輸入框表現正常，下輸入框：相同的問題，有的表現正常，有的會被鍵盤蓋住(會出現該情況的手機，占據少數，而且跟瀏覽器相關)
IOS下：上輸入框表現正常
IOS下，下輸入框會彈到鍵盤上面，雖不是緊挨着鍵盤，但是情況可以接受。
所以這種情況下，是可以使用的，最好再把Android下的問題，解決一下，那么該方法，將是固定輸入框的最佳解決方案了
Android的手機，表現形式依然和前面的兩個示例，基本一致。
主要還是看IOS的表現了，從示例中，可以看到，表現與第一個示例，表現差不多，原因在於，它就是屬於第一種的情況，文檔高度，是低於一屏的。其表現形式也是很給力，頂部輸入框，可以完美的解決，底部輸入框稍微跳動，不過可以接受。
如果您使用這種布局，而且需要的是頂部輸入框固定的話，而且又不能跳轉新頁來實現該方法的話，那么單頁布局方式，將會非常有效，所以請考慮。
6：輸入框在普通流中
單頁布局，只適用於，需要固定布局的時候，其他的時候，還是使用普通流布局為好，畢竟越普遍的東西，其兼容性會越好，雖然理論上，單頁布局，不會出現其他的問題，但是誰又能保證一些瀏覽器，會被使用者，改成什么樣子呢。
而固定布局，其實也主要是為了解決IOS端的問題，對於Android端的，其實大可以直接使用普通布局來實現的，只是如果寫兩套的話，也有些麻煩的。
那么我們再來看看，輸入框在普通文檔流內部時的情況吧：
這個情況，在我看來，應用場景，是比前面固定布局的應用場景多的。該部分的內容，本篇就不做說明，因為雖然有些想法，但當前這些想法並沒有在實際中應用過，也沒有測試過一些機型，沒有經過驗證的東西，說出來就會變得有些不負責任了。
待我之后在項目中，以項目為試驗對象，總結研究過之后，再來說說普通流中，輸入框在Android下的一些易發狀況，以及處理方式。
總結
這位博主寫的很詳細但是還有些問題 ipone中第一次焦點時軟鍵盤會遮住部分輸入框，
使用焦點時
interval = setInterval(function() {
document.body.scrollTop = document.body.scrollHeight
}, 100);
失去焦點取消
clearInterval(interval);
可以解決遮住的問題
本篇到此為止。
如果您發現文中有描述錯誤或者不當的地方，請留言指出，不勝感激，謝謝！
本文屬於原創文章，如需轉載，請注明出處，謝謝！