移动端虚拟键盘影响页面布局的问题

Posted Sonya·Lv

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端虚拟键盘影响页面布局的问题相关的知识,希望对你有一定的参考价值。

问题描述:点击input输入框,虚拟键盘弹出时,若body禁止滚动,在一个页面显示时,body中元素会被压缩变形。若body出现滚动条,则会将整体页面向上移动

解决方法:

1、

$(document).ready(function() {  
   $(‘body‘).height($(‘body‘)[0].clientHeight);
});

2、$(‘input‘).focus(function(){ $(‘.contact‘).css(‘position‘,‘static‘); }).blur(function(){ $(‘.contact‘).css(‘position‘,‘fixed‘); });

 

以上是关于移动端虚拟键盘影响页面布局的问题的主要内容,如果未能解决你的问题,请参考以下文章

虚拟键盘冲击移动端fixed布局的解决方案

移动端软键盘弹出影响页面布局(iOS软键盘取消后,页面没有恢复),移动端软键盘监听(弹出,收起),及影响定位布局的问题

移动端H5页面_input获取焦点时,虚拟键盘挡住input输入框解决方法

web页面移动端键盘弹出后对页面布局的影响

h5移动端常见虚拟键盘顶起底部导航栏解决办法

移动端 模拟键盘 盖住表单