場景說明：產品需求在wap頁面，需要在頁面底部固定一塊區域執行輸入操作。在Android手機中，對position：fixed是完美支援並實現預計效果的，但ios系統手機測試時出現輸入框游標不居中和底部區域有時候會被彈出的鍵盤遮擋一部分。
度娘搜出方案：
- 使用position：absolute模擬；
- 判斷當前獲得焦點元素是input則隱藏div改為position：absolute；
- 外掛iscroll.js；
實踐度娘提供的方案，三個字 不靠譜！！
最後採用當下比較流行的單頁面思想，頁面載入時，給頁面最外層div設定螢幕高度，再設定overflow：scroll和position:relative屬性，即頁面超過就滾動顯示。然後給需固定底部區域設定position：absolute；bottom:0px;left:0px;從而實現了position：fixed屬性的效果。
<div style="position:relative;" id="pageContal">
<div style="postion:absolute;bottom:0px;lefe:0px;">
<input type="text" style="border:1px solid #e6e6e6;border-radius:6px" placeholder="請輸入你的手機號碼"/>
</div>
</div>
複製程式碼
進入階段，產品經理拿著2臺不同系統手機出現我面前，給我看了效果，發現由於系統不同，連同一個輸入法，也有不同高度和顯示樣式。在ios系統中，使用者下載的輸入法還是出現遮擋底部輸入框的情況出現。此時我無言以對，沒法懟產品經理了。
所以最後自己寫了一個模擬鍵盤的外掛。。。。
模擬鍵盤外掛實現思路：採用表格佈局，高度和寬度自適應，移動端用rem單位省事不少。然後監聽每個數字鍵盤的點選事件，（此處有個大坑，ios的如果不是a標籤，是無click事件，點選無效，其他元素新增click事件，必須加一個屬性：cursor：pointer，元素點選才有效果）；定義一個陣列來存放使用者輸入的值，點選就陣列追加元素，刪除元素就是陣列刪除元素，so easy！
<table id="table-keyboard">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td class="bg-ccc"></td>
<td class="num-td">0</td>
<td class="delte_but bg-ccc"><img src="img/keyboard-del.png" alt=""/></td>
</tr>
</tbody>
</table>
複製程式碼
效果
剛做完這個專案，趁週末休息時間，總結一下這次遇到印象比較深刻的問題，感覺ios就是個坑，一不小心就掉坑都不知道了。前端小夥伴，保重共勉！
如程式碼有錯誤的，或者遇到問題，請指教！互相學習！