解决移动端虚拟键盘扰乱布局问题

做移动端开发时总会遇到这样的问题：
在某些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或%作为单位。