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. springboot:SunCertPathBuilderException: unable to find valid certification path to requested target

    有次创建springboot工程时报错,在之前是没有问题的.见下: 出现这种情况,有时在URL最后加一个反斜杠就可以了,但是这次不行,加了也没有用. 后来把URL改成了:http://start.sp ...

  2. 【原创】Linux基础之文件编码

    查看 1 vi $ vi $file:set fileencoding 2 file $ file $file 修改 $ vi $file:set fileencoding=utf-8

  3. nginx负载均衡后端tomcat无法加载js资源

    JS或css无法完全加载 nginx的代理缓存区,默认较小导致部分文件出现加载不全的问题,比较典型的如jQuery框架,可以通过配置调整nginx的缓存区即可.主要参考proxy参数 最终完整配置如下 ...

  4. 重启报错:Failed to open /dev/initctl: No such device or address

    [root@WEB-APP-REP-MASTER ~]# rebootError getting authority: Error initializing authority: Error call ...

  5. better-scroll项目中遇到的问题

    1.在项目中发现个问题,用better-scroll实现的轮播图和页面滚动条俩个效果一起出现的时候,当鼠标或手指放在轮播图位置的时候,上下滚动的时候,页面滚动条不动 发现最新的版本就会出这个问题,就是 ...

  6. est是基于less的样式工具库

    网址:http://ecomfe.github.io/est/ 此处HTML中如果直接引用less就会报错! est 如果直接引用less和js 是会报错的 样式规范:https://www.zybu ...

  7. Confluence 6 查看系统信息

    系统信息界面提供了有关 Confluence 的配置信息和 Confluence 部署的环境信息. 希望对你的系统信息进行查看: 在屏幕的右上角单击 控制台按钮 ,然后选择 General Confi ...

  8. Confluence 6 数据库问题解除

    有关数据库相关的问题,请参考 Database Troubleshooting 中的内容. 希望获得更多的帮助,请参考 Troubleshooting Problems and Requesting ...

  9. npm安装依赖包 --save-dev 和 --save; package.json的devDependencies和dependencies 的区别!

    以前一直在纠结一个npm安装的包依赖管理的问题.是这样的: 我们在使用npm install 安装模块或插件的时候,有两种命令把他们写入到 package.json 文件里面去,他们是:--save- ...

  10. ionic 打包 报错Execution failed for task ':processDebugResources'. > com.android.ide.common.process.ProcessException: Failed to execute aapt

    在platform --> android目录下找到build.gradle文件,打开并在def promptForReleaseKeyPassword() {...}函数前加入以下内容: 完整 ...