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

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 继最近写移动端H5项目不断踩坑之后,决定找一些对自己后续开发有帮助的大总结博客来看看,但是个人很懒,所以将浏览过的...
    陈大冲阅读 2,233评论 0 8
  • H5页面窗口自动调整到设备宽度,并禁止用户缩放页面//一、HTML页面结构 // width 设置viewp...
    tiandashu阅读 16,767评论 0 9
  • 透视与空间 一切物体都占有一定的空间,物与物之间也存在着一定的空间距离。如作画者与被画物体的空间距离,物体与物体之...
    小申羊阅读 1,854评论 0 6
  • 我总会想 风 她来自哪里? 又要去哪里呢? 她吹拂过缠绵的春天 像翩跹的少女 跳起一支精灵的舞蹈 那是风之精灵吧!...
    深月影阅读 1,210评论 2 6
  • 发现怀上你的时候,内心有小小的欣喜~ 不知道何时,一颗小小的种子埋进了妈妈的肚子里,然后慢慢的长大于是有了你。 在...
    Karman风中果实阅读 141评论 0 2