做移動端開發(fā)時總會遇到這樣的問題：
在某些Android機上點擊輸入框時頁面的的布局錯亂，字體變小，輸入框被遮擋等問題茎活。
問題的原因（個人見解）：
在出問題的手機瀏覽器上虛擬鍵盤不是以浮層的形式顯示妄痪，而是以一個占據(jù)頁面空間的div顯示，因為虛擬鍵盤要占據(jù)空間嘁傀，則你的內(nèi)容頁面的高度就會減少兴蒸，所以如果你的適配里面有關(guān)于高度適應(yīng)的字體設(shè)置，則需要進行修改细办。你的網(wǎng)頁像是一個iframe一樣嵌入到到當前的窗口而虛擬鍵盤就是和這個iframe同一級橙凳，所以你使用fixed定位彈窗，還有底部導(dǎo)航等等會被頂上去笑撞。
解決的方案：
解決字體的樣式：如果你的字體沒有高度適配岛啸，一般不會有問題，如果有茴肥，你需要覆蓋適配的樣式坚踩，用js改變即可。
adaptive: function() { //頁面適配問題
var htmlObj = document.querySelector('html') || document.getElementsByTagName('html')[0] || document.body;
var MOBILE_BASE_SEIZE = 20;
try{
if (!htmlObj) {
throw new Error('Get the html element error!');
}
let client_w = htmlObj.clientWidth,
baseFontSize = 18.75;
baseFontSize = client_w/MOBILE_BASE_SEIZE;
htmlObj.style.fontSize = baseFontSize + 'px';
} catch (e) {
console.log('function adaptive error:', e);
}
}
虛擬鍵盤會觸發(fā)onresize事件時瓤狐，所以在resize事件中再調(diào)用一次
解決布局錯亂問題：這是因為高度減小導(dǎo)致的瞬铸，所以先保存當前頁面的高度，當虛擬鍵盤出現(xiàn)時础锐，會觸發(fā)onresize事件嗓节，所以將布局高度強制設(shè)置為原始高度即可。
解決input被遮擋問題：
//輸入框鼠標聚焦事件
var input =('.raffle .share_guide input');
.each(input,function (i, input) {
console.log((input[i]));
(input[i]).focus(function () {
var timer = setTimeout(function () {
var dialog = document.getElementById('registDialog');
dialog.scrollIntoView(true);
dialog.scrollIntoViewIfNeeded();
}, 200);
});
});
最重要的是：scrollIntoView 和 scrollIntoViewIfNeeded事件皆警，具體使用自己百度拦宣。
建議最好使用rem或%作為單位。
