做移动端开发时总会遇到这样的问题：
在某些Android机上点击输入框时页面的的布局错乱，字体变小，输入框被遮挡等问题。
问题的原因（个人见解）：
在出问题的手机浏览器上虚拟键盘不是以浮层的形式显示，而是以一个占据页面空间的div显示，因为虚拟键盘要占据空间，则你的内容页面的高度就会减少，所以如果你的适配里面有关于高度适应的字体设置，则需要进行修改。你的网页像是一个iframe一样嵌入到到当前的窗口而虚拟键盘就是和这个iframe同一级，所以你使用fixed定位弹窗，还有底部导航等等会被顶上去。
解决的方案：
解决字体的样式：如果你的字体没有高度适配，一般不会有问题，如果有，你需要覆盖适配的样式，用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);
}
}
虚拟键盘会触发onresize事件时，所以在resize事件中再调用一次
解决布局错乱问题：这是因为高度减小导致的，所以先保存当前页面的高度，当虚拟键盘出现时，会触发onresize事件，所以将布局高度强制设置为原始高度即可。
解决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或%作为单位。
