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

绝地灬酷狼 2022-05-26 05:17 477阅读 0赞

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