具體問題
安卓手機HTML5頁面中input\textarea聚焦時,彈出虛擬鍵盤導致頁面背景向上移動,造成頁面混亂或者頁面留白。(此現象以本人測試下來看,只有安卓手機存在,iphone手機不會出現此問題)
病因所在
當聚焦input\textarea時,軟鍵盤彈出,改變了height,將高度設置成height:100%,不能達到原來的高度。就會出現留白,或者將頁面布局打亂的狀況。
解決方案
在input\textarea聚焦時,將body的高度改變為頁面可顯示的區域的高度。
擼代碼(將代碼寫在input的focus函數中)
- 原生js
var _body=document.getElementsByTagName('body')[0];
_body.style.height=_body.clientHeight+"px";
- jQuery
$('body').height($('body')[0].clientHeight);