1.之前做微信公眾號時發現每次調用鍵盤輸入的時候輸入框就被蓋著，讓人有點煩，于是研究了一番，有了點下面的收獲，解決了鍵盤蓋著輸入框的問題，下面我的這些都是在微信公眾號測試的，手機瀏覽器也可以，但是可能需要再修改一些數據，先上效果圖，再上代碼：
①：上面的效果圖隨意擺放的input輸入框喚起鍵盤的對齊問題，下面上代碼：
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width"/>
<style>
*{margin:0;padding:0;}
html,body{width:100%}
.box{width:100%}
.box ul li{width:100%;height:80px;line-height:80px;margin-bottom:5px;background:lightblue;text-align:center;}
.inputBox{width:100%;height:60px;line-height:60px;background:lightblue;text-align:center;}
.input1{width:100%;height:80px;line-height:80px;font-size:20px;border:none;background:gainsboro;}
.input2{width:100%;height:60px;line-height:60px;font-size:20px;border:none;background:gainsboro;}
</style>
<body>
<div class="box">
<ul>
<li>0</li><li>1</li><li>2</li><li>3</li><li class='li'><input type="text" placeholder="this is input1" class="input1"></li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>0</li><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
<ul>
<div class="inputBox"><input type="text" placeholder="this is input2" class="input2"></div>
</div>
<script>
$(document).ready(function() {//如果此處增加一個alert彈窗，IOS上面就可以自動對齊，如果沒有則不會自動對齊加個延遲的定時器盡然也可以達到同樣的效果，alert和延遲定時器有什么關系嗎?
var ?u=navigator.userAgent;
var ?isAndroid=u.indexOf('Android') > -1||u.indexOf('Adr') > -1;//android終端
var ?isiOS= !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);//ios終端
var scrollTop;
$(".input1").focus(function() {
scrollTop=document.body.scrollTop; ? ?//獲取焦點時記錄一下input的當前位置，以便失去焦點的時候重新回到原來的位置；或者$(document).scrollTop()也可以setTimeout(function() { ? ?//如果不用定時器和alert之類的，不會執行，
if(isiOS){ ? ? ? ? ? //這里要判斷IOS和安卓，因為他們執行的是不同的代碼
document.body.scrollTop= ($(".input1").offset().top-98); ? ?//這個在IOS上面是好的，$(".class").offset().top獲取頁面到頂部的距離，后面減的是input元素框的高度，}
if(isAndroid){
document.body.scrollTop= ($(".input1").offset().top-180); ?//這個在安卓上是好的，如果input輸入框在頁面底部就不用管沒事，如果input輸入框在頁面中就需要上面的代碼，才可以，$(".class").offset().top獲取頁面到頂部的距離，?后面減的是input元素框的高度，但是安卓的關閉鍵盤時輸入框沒有失去焦點，導致無法回到原來的位置，只能點擊其他地方才會突然回到原來的位置。下面的失去焦點回到原來位置的代碼不知道還有沒有必要？
}
},40);
}).blur(function() {
setTimeout(function() {
document.body.scrollTop=scrollTop;
},40);
})
});
②：上面的代碼是隨意放置的input的對齊問題，下面的代碼是標準的header，body，footer三段式的布局的對齊代碼：界面結構見下圖：
上面的就是界面的結構，下面先上效果圖，再展示代碼：
下面上代碼：
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width"/>
*{margin:0;padding:0;}
html,body{width:100%} ??/*聊天窗口_頂部*/
.nav{display:block;position:absolute;top:0;width:100%;height:50px;line-height:50px;font-size:2rem;background-color:gray;z-index:99;color:white;text-align:center;}
/*聊天窗口_內容*/
.content{display:block;position:absolute;top:50px;bottom:50px;width:100%;height:auto;background-color:#ebebeb;overflow-y:scroll;-webkit-overflow-scrolling:touch;}
.content ul li{width:100%;height:80px;line-height:80px;text-align:center;font-size:20px;margin-bottom:5px;background:lightblue;}
/*聊天窗口_底部*/
#returnframe{display:block;position:absolute;bottom:0;width:100%;height:50px;background-color:#f4f4f4;border-top:1px solid#d8d8d8;z-index:99;}
.inputframe{width:70%;height:100%;float:left;border:none;box-sizing:border-box;}
.returnframe_button{width:30%;height:100%;float:left;text-align:center;line-height:50px;box-sizing:border-box;background:lavender;}
<div class="nav">this is top</div>
<div class="content"><ul><li>0</li><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>0</li></ul></div>
<div id="returnframe"><input type="text" name="inputframe" class="inputframe"><div class="returnframe_button">發送</div></div>
下面是js代碼，依賴于jQuery：
//? ? 解決第三方軟鍵盤喚起時底部input輸入框被遮擋問題
var bfscrolltop=document.body.scrollTop; ? //獲取軟鍵盤喚起前瀏覽器滾動部分的高度
$("input.inputframe").focus(function(){ ? ? //在這里‘input.inputframe’是我的底部輸入欄的輸入框，當它獲取焦點時觸發事件
interval=setInterval(function(){ ?//設置一個計時器，時間設置與軟鍵盤彈出所需時間相近
document.body.scrollTop=document.body.scrollHeight; ? ?//獲取焦點后將瀏覽器內所有內容高度賦給瀏覽器滾動部分高度
},100)
}).blur(function(){ ? ? //設定輸入框失去焦點時的事件
clearInterval(interval);//清除計時器
document.body.scrollTop=bfscrolltop;//將軟鍵盤喚起前的瀏覽器滾動部分高度重新賦給改變后的高度
});
