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. zookeeper权限问题

    对cdrwa的说明如上,网上一些博客乱写误导 参考链接:http://zookeeper.apache.org/doc/r3.1.2/zookeeperProgrammers.html 这是在使用zk ...

  2. vue-cli(vue脚手架)超详细教程

          都说Vue2简单上手容易,的确,看了官方文档确实觉得上手很快,除了ES6语法和webpack的配置让你感到陌生,重要的是思路的变换,以前用jq随便拿全局变量和修改dom的锤子不能用了,vu ...

  3. Redis的安装、配置及测试

    Redis下载地址 https://github.com/MicrosoftArchive/redis/releases(如果需要安装windows服务版本,需要下载msi格式) 或 https:// ...

  4. mysql:赋予用户权限、查看及修改端口号

    一.mysql 赋给用户权限 grant all privileges on *.* to joe@localhost identified by '1'; flush privileges; 即用u ...

  5. filter(HTML)滤镜用法

    CCS滤镜参考语法:STYLE="filter:filtername(fparameter1, fparameter2...)" (Filtername为滤镜的名称,fparame ...

  6. html学习——基础分类总结

        1. html     超文本标记语言HyperText Markup Language.html文档基本结构: <!DOCTYPE html><head> <! ...

  7. Windows Service 2012 R2 下如何建立ftp服务器

    1.首先在本地机器上创建一个用户!这些用户是用来登录到FTP的!我的电脑右键->管理->本地用户和组->用户->“右键”新建用户->输入用户名和密码再点创建就行了! 2. ...

  8. Android 基础 二 四大组件 Activity

    Activity Intent IntentFilter 一理论概述 一. Activity 用来提供一个能让用户操作并与之交互的界面. 1.1 启动 startActivity(Intent int ...

  9. LeetCode(71):简化路径

    Medium! 题目描述: 给定一个文档 (Unix-style) 的完全路径,请进行路径简化. 例如,path = "/home/", => "/home&quo ...

  10. PDF怎么编辑,如何旋转PDF页面方向

    很多的时候,无论是工作中,还是在学习中都会遇到PDF文件,对于PDF文件,熟悉的小伙伴知道,在编辑PDF文件的时候,是需要使用到PDF编辑软件的,那么,在编辑PDF文件的时候,需要旋转文件的页面,这时 ...