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

问题描述:点击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‘); });

时间: 2024-10-09 22:01:49

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

移动端input的虚拟键盘影响布局

移动布局经常会使用绝对定位(absolute)和固定定位(fixed)来布局一个层.然后这个层上面会有一些信息,当这个层上面为input时,移动端输入信息则会弹出虚拟键盘,从而会影响我们的布局,给我们带来困扰.经常碰到却很少整理,再次碰到又是一头雾水,趁着这次有空,我把我测试成功的方法记录下来.具体看自己情况应用,纯属个人试验. 情况一.用absolute写的一个层(class名为elayer),层设置有背景颜色,然后层上面布局有input.当点击input软键盘弹出后,这个层向上面移动背景随之

移动端 模拟键盘 盖住表单

关于移动端页面弹出框被软键盘遮挡的问题 移动端虚拟键盘遮挡页面输入框等元素的解决方案 vue 移动端input被输入法键盘挡住解决方法 移动端弹出输入框遮挡问题处理方案 原文地址:https://www.cnblogs.com/justSmile2/p/10950688.html

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

在做移动端业务开发时,会碰到fixed元素和输入框同时存在的情况.在手机软键盘唤起的情况下,会造成原本fixed定位的元素跟随软键盘而上浮,对整体布局造成冲击.来看这样一个栗子直观的感受一下这个bug. 问题描述: 开发一个创业板转签页面,预期效果图是这样的. 红色矩形区域为使用fixed布局的内容,其css代码为{width:100%;position:fixed;bottom:0;left:0},这看起来并没有什么问题,但在手机软键盘唤起进行输入的时候,红色矩形区域跟随软键盘而浮动起来,这时

移动端 软键盘 弹出时 影响布局

移动端 软键盘 弹出时 会影响布局 1)前段时间作的移动端页面,因为高度只有1页所以用了height:100%;width:100%; ios下点击输入框弹出软键盘时,布局没有大影响. 当输入框可能被软键盘压到时,在一部分安卓下却出了问题,华为自带浏览器和UC会有布局上的问题. 原因可能是因为,软键盘弹出时,改变了height,使height:100%,不能达到原来的高度. 解决办法: $(document).ready(function () { $('body').height($('bod

页面跳转 和虚拟键盘的自动隐藏

前提:起码要有两个视图控制器. 注意事项: 设置跳转的动画效果 UITextField输入时,虚拟键盘的位置设置(整体布局向上移动,虚拟键盘的自动隐藏) 实现的功能: A:在第一个页面跳转到第二个页面,然后第二个页面点击按钮,进行返回 B:在第一个页面有一个text控件,点击一个按钮,传递到第二个页面,然后显示到第二个 页面的label上面: 效果展示: 步骤: 1.新建两个类,然后勾选xib,在AppDelegate的实现文件把其中的一个视图加载进去 //新建一个视图控制器 MainViewC

移动端页面布局的那些事儿

移动端页面布局的那些事儿 http://www.xiaoxiangzi.com/Programme/CSS/4298.html 一. viewport 什么是viewport 简单来讲,viewport就是浏览器上,用来显示网页的那一部分区域了,也就是说,浏览器的实际宽度,是和我们手机的宽度不一样的,无论你的手机宽度是320px,还是640px,在手机浏览器内部的宽度,始终会是浏览器本身的viewport.如今的浏览器,都会给自己的本身提供一个viewport的默认值,可能是980px,或者是其

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

在h5移动端开发中相信很多朋友跟我一样都会遇到页面底部导航被虚拟键盘顶起的问题,自己在网上找到的解决办法拿出来与大家分享,有不完美之处还望见谅,有更好的解决办法可以贴出来大家一起互相学习!! var oHeight = $(document).height(); //浏览器当前的高度 // 浏览器窗口发生变化时判断 $(window).resize(function(){ if($(document).height() < oHeight){ $('footer').hide(); }else{

手机端页面,隐藏虚拟键盘

原生js中没有方法来控制手机虚拟键盘的隐藏与显示,当输入框得到焦点时会自动弹出虚拟键盘,很多时候页面已经滚动到别处了,键盘应该隐藏了,可键盘还是没收回,这时候可用个变通的办法了隐藏键盘. 首先在页面增加一个input元素: <input type="text" class="input-null" id="input-null" readonly> css如下 .input_null { display: block; width:

移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法

这两天自己在写一个手机网页,用到了触屏滑动的特效,就是往右滑动的时候左侧隐藏的菜单从左边划出来. 做完之后在手机原生浏览器中运行正常,但在QQ和微信中打开,发现touchmove只会触发一次,而且touchend也经常不触发. 之后百度了一下这个问题,原因是 主要是由于200ms超时导致内核不一定会一直处理touchmove事件,一旦超时会将后续所有的事件转交给UI处理,导致touchmove不会一直触发. 为了解决开发者需要,建议开发者在touchstart时调用event.preventDe