5防止安卓手机软键盘弹出挤压页面导致变形的方法 
输入框定位在底部,手机端打开,输入框聚焦后软键盘打开为什么会瞬间自动关闭呢? 
先看看问题: 
1.原来是这样的: 

2.在苹果手机里面是正常的: 

3.到了安卓就是这样: 

4.原因就是在安卓中被软键盘顶上来了,而苹果的软键盘是覆盖的(分层) 
5.后来用的解决方法是,把当前页面的body固定好,即在当然页面加上这段js:

$('body').height($('body')[0].clientHeight);
  • 1

6.成功之后的样子是: 

~~~~~~~~~点赞的亲,以后都不会遇到bug~~~~~~~~~~~~~~~~~~~~~~~

js防止安卓手机软键盘弹出挤压页面导致变形的方法的更多相关文章

  1. 微信浏览器软键盘弹出与页面resize的问题

    使用微信打开网页,弹出软键盘时遇到的兼容问题 过去开发中遇到过很多这种情况,页面底部需要固定定位一个按钮,广告栏或者菜单栏,页面中有表单项需要填写,在打开手机虚拟键盘的时候,底部固定定位的元素会处在软 ...

  2. 点击input框,不让手机软键盘弹出的办法

    设置readonly="" <input type="text" readonly="" placeholder="请输入邮 ...

  3. js 移动端之监听软键盘弹出收起

    js 移动端关于页面布局,如果底部有position:fixed的盒子,又有input,当软键盘弹出收起都会影响页面布局.这时候Android可以监听resize事件,代码如下,而ios没有相关事件. ...

  4. 小米note3,华为手机,软键盘弹出之后,页面上定位的元素布局会乱掉

    原因:可能是因为,软键盘弹出时,改变了height,使height:100%,不能达到原来的高度. 解决办法: $(document).ready(function () { $('body').he ...

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

    之前我们在使用vue进行 h5 表单录入的过程中,遇到了Android软键盘弹出,覆盖 h5页面 输入框 问题,在此进行回顾并分享给大家: 系统:Android 条件:当输入框在可视区底部或者偏下的位 ...

  6. input获取焦点软键盘弹出影响定位

    解决移动端底部fixed和input获取焦点软键盘弹出影响定位的问题$(document).ready(function() {                                var ...

  7. Android软键盘弹出时布局问题

    最近项目需要做一个类似聊天室的模块,基于Socket实现的,这部分稍后一段时间再做总结,功能上的相关点都实现了小例子也做出来了,最后发现一个比较腻歪的问题就是软键盘弹出时总是会把标题“挤出”屏幕,(无 ...

  8. 解决react-native软键盘弹出挡住输入框的问题

    解决react-native软键盘弹出挡住输入框的问题 写登录页面,整体界面居中之后就出现软键盘弹出挡住输入框,用户体验不好的情况.用了RN官方的KeyboardAvoidingView组件,会有多出 ...

  9. ionic项目中 软键盘弹出之后的问题:

    Android SDK目前提供的软键盘弹出模式接口只有两种: 一是弹出时自动回冲界面,将所有元素上顶: 一种则是不重绘界面,直接将控件元素遮住:     1. ionic 中弹出键盘遮挡住输入框(覆盖 ...

随机推荐

  1. datatables:如何禁用一列的排序

    第一列是checkbox列,不需要排序,所以需要禁用掉. 代码如下: var table = $('#example1').DataTable( { 'paging' : true, 'lengthC ...

  2. 开通博客的第一天上传我的C#基础笔记。

    1.索引器  string arrStr = "sddfdfgfh";  索引器的目的就是为了方便而已,可以在该类型的对象后面直接写[]访问该对象里面的成员  Console.Wr ...

  3. jqGrid后台交互样例

    schoolManageGrid = $("#jqGrid").jqGrid({ url : ctx.path+"/api/school/querySchools&quo ...

  4. 玩转 lua in Redis

    一.引言 Redis学了一段时间了,基本的东西都没问题了.从今天开始讲写一些redis和lua脚本的相关的东西,lua这个脚本是一个好东西,可以运行在任何平台上,也可以嵌入到大多数语言当中,来扩展其功 ...

  5. 详解 HTTPS、TLS、SSL、HTTP区别和关系

    一.什么是HTTPS.TLS.SSL HTTP也称作HTTP over TLS.TLS的前身是SSL,TLS 1.0通常被标示为SSL 3.1,TLS 1.1为SSL 3.2,TLS 1.2为SSL ...

  6. JS知识点随笔

    1.为什么 0.1 + 0.2 != 0.3? 原因: 因为 JS 采用 IEEE 754 双精度版本(64位),并且只要采用 IEEE 754 的语言都有该问题. 我们都知道计算机是通过二进制来存储 ...

  7. ASP.NET的路由系统:路由映射

    总的来说,我们可以通过RouteTable的静态属性Routes得到一个基于应用的全局路由表,通过上面的介绍我们知道这是一个类型的RouteCollection的集合对象,我们可以通过调用它的MapP ...

  8. Confluence 6 链接到其他应用

    应用链接(Application Links)有时候也被称为 "AppLinks" 是一系列测插件能够允许你在 Atlassian  的应用中互相链接.链接 2 个应用能够允许你在 ...

  9. bat命令行实现全盘遍历搜索文件

    背景:当想要查找一个文件时,记得放在某个盘里.手动去遍历时感觉好心累,找了半天还是没有找着(虽然win有自带的搜索框,但是看着进度条的速度,我便果断的点了取消).基于这个情况,所以写了脚本满足自身查找 ...

  10. EasyUI Layout 布局

    1.在整个页面上创建布局(Layout) <!DOCTYPE html> <html> <head> <title>吹泡泡的魚-主页</title ...