解决安卓手机键盘弹出时会把背景或百分比定位的布局压缩的问题

做移动端页面时经常遇到以下案例,在有背景的页面上写表单,而且底部为了适应不同手机还得运用绝对定位,因为通常是把容器高度设为了100%,这时在安卓手机上弹窗软键盘时就会把背景图片及其他东西挤压上去,解决方法如下:

在css样式中把大容器定义为fixed布局

  .wrap{ position:fixed;left:0;top:0; }

在js中强制把页面的高度覆给他,就相当于自动撑开

var x =document.body.clientWidth; //查询设备的宽度

var y =document.body.clientHeight; //查询设备的高度

$(".wrap").width(x); //

$(".wrap).height(y); //把设备的宽高赋给页面
时间: 2024-12-25 23:09:01

解决安卓手机键盘弹出时会把背景或百分比定位的布局压缩的问题的相关文章

如何解决安卓手机键盘弹出将页面压缩

很多时候项目中我们需要用到输入框input,input聚焦时会调用手机键盘,这个时候我们如果当前页面最大元素宽高写的是实际像素,那是没有问题的,但是如果写的是百分百在安卓机上当前页面就会被向上压缩,但是移动端我们必须做成自适应,我们宽高不能写固定宽高的,那么该如何解决,首先我们可以获取当前手机设备的宽高,然后再给当前页面写宽高,同时加上position:fixed: <style> .page{ position:fixed; left:0; top:0; } </style> v

[Phonegap+Sencha Touch] 移动开发19 某些安卓手机上弹出消息框 点击后不消失的解决办法

Ext.Msg.alert等弹出框在某些安卓手机上,点击确定后不消失. 原因是: 消息框点击确定后有一段css3 transform动画,动画完成后才会隐藏(display:none).有些奇葩手机就是不一样. 解决办法就是禁用消息框的动画: 方法一: 在app.js的launch方法里面加上 Ext.Msg.defaultAllowedConfig.showAnimation = false Ext.Msg.defaultAllowedConfig.hideAnimation = false

键盘的出现于隐藏(解决键盘弹出时会覆盖文本框的问题,代码实现)

#import "ViewController.h" #import "UIView+FrameExtension.h" // 可以自己写,以后用着方便 #define kDeviceHeight [UIScreen mainScreen].bounds.size.height @interface ViewController () @end @implementation ViewController - (void)viewDidLoad { [super v

解决Android软键盘弹出引起的各种不适

在做输入信息页面的时候,经常会遇到键盘挡住输入框或者将一些控件顶起的情况,android为此提供了一系列的的配置参数供选择,可以在androidmanufist.xml的对应Activity的windowSoftInputMode属性中进行配置: 详细说明这四个参数: int SOFT_INPUT_ADJUST_NOTHING Adjustment option for softInputMode: set to have a window not adjust for a shown inpu

Android软键盘弹出,覆盖h5页面输入框问题

之前我们在使用vue进行 h5 表单录入的过程中,遇到了Android软键盘弹出,覆盖 h5页面 输入框 问题,在此进行回顾并分享给大家: 系统:Android 条件:当输入框在可视区底部或者偏下的位置 触发条件:输入框获取焦点,弹出软键盘 表现:软键盘 覆盖 h5页面中的输入框 问题分析: 1.发现问题:当前页面中box为flex布局,内容为上下固定高,中间自适应(中间区域内容过多会出现滚动条,input框在wrapper的底部),input获取焦点,手机键盘弹出,input未上移到可视区内,

解决安卓手机上软键盘弹出挤压背景的问题

demo: // 解决本页面软键盘弹窗背景挤压的问题 var clientHeight = document.documentElement.clientHeight || document.body.clientHeight; $(window).on('resize', function () { var nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight; if (cli

[Cordova/Phonegap] Cordova iOS 应用在第三方输入法的键盘弹出(点击输入框)时,页面不上移,导致输入框被键盘遮挡 的解决办法

http://blog.csdn.net/lovelyelfpop/article/details/52033045 Cordova iOS应用在使用系统自带输入法键盘的时候,聚焦文本框是会将整体webview界面上移的,如下图: 然而,如果你用的是第三方输入法(百度.搜狗.qq输入法等都是),聚焦文本框弹出键盘时,界面却不会整体上移,导致文本框被软键盘遮挡,如下图: 不仅被遮挡,靠底部的文本框还无法往上拖拽滚至可视区域. 解决办法一:第三方键盘弹出,实现界面也能上移 使用 ionic-plug

如何解决软键盘弹出引起的各种不适

1.如何解决软键盘弹出引起的各种不适 2.android软键盘弹出引起的各种不适终极解决方案 3.android软键盘弹出引起的各种不适终极解决方案 4.android软键盘弹出,会把原来的界面挤上去的问题 处理方法 5.Android 关于弹出键盘问题的几种情况和解决方案 6.Android 弹出软键盘问题(最终解决方法) 7.Android 软键盘显示隐藏监听解决方案

移动端点击文本框 键盘弹出解决访问

当我们做h5的时候,经常会遇到键盘弹出遮挡文本框的情况,这里区分IOS和安卓, 在IOS中,IOS会在键盘弹出后自动将文本框上移,避免文本框被键盘挡住,但是在收起键盘的时候 在vue中会导致页面的卡死,这个时候我们可以用 document.body.scrollIntoView(false) 来手动让页面重新渲染,因为IOS收起键盘后,会触发当事文本框的blur事件,所以我们可以给文本框添加该事件. 在安卓中,通常会出现键盘把文本框遮挡住的情况,我们可以监听文本框的focus事件,当文本框foc