js防止安卓手机软键盘弹出挤压页面导致变形的方法
5防止安卓手机软键盘弹出挤压页面导致变形的方法
输入框定位在底部,手机端打开,输入框聚焦后软键盘打开为什么会瞬间自动关闭呢?
先看看问题:
1.原来是这样的:
2.在苹果手机里面是正常的:
3.到了安卓就是这样:
4.原因就是在安卓中被软键盘顶上来了,而苹果的软键盘是覆盖的(分层)
5.后来用的解决方法是,把当前页面的body固定好,即在当然页面加上这段js:
$('body').height($('body')[0].clientHeight);
- 1
6.成功之后的样子是:
~~~~~~~~~点赞的亲,以后都不会遇到bug~~~~~~~~~~~~~~~~~~~~~~~
js防止安卓手机软键盘弹出挤压页面导致变形的方法的更多相关文章
- 微信浏览器软键盘弹出与页面resize的问题
使用微信打开网页,弹出软键盘时遇到的兼容问题 过去开发中遇到过很多这种情况,页面底部需要固定定位一个按钮,广告栏或者菜单栏,页面中有表单项需要填写,在打开手机虚拟键盘的时候,底部固定定位的元素会处在软 ...
- 点击input框,不让手机软键盘弹出的办法
设置readonly="" <input type="text" readonly="" placeholder="请输入邮 ...
- js 移动端之监听软键盘弹出收起
js 移动端关于页面布局,如果底部有position:fixed的盒子,又有input,当软键盘弹出收起都会影响页面布局.这时候Android可以监听resize事件,代码如下,而ios没有相关事件. ...
- 小米note3,华为手机,软键盘弹出之后,页面上定位的元素布局会乱掉
原因:可能是因为,软键盘弹出时,改变了height,使height:100%,不能达到原来的高度. 解决办法: $(document).ready(function () { $('body').he ...
- Android软键盘弹出,覆盖h5页面输入框问题
之前我们在使用vue进行 h5 表单录入的过程中,遇到了Android软键盘弹出,覆盖 h5页面 输入框 问题,在此进行回顾并分享给大家: 系统:Android 条件:当输入框在可视区底部或者偏下的位 ...
- input获取焦点软键盘弹出影响定位
解决移动端底部fixed和input获取焦点软键盘弹出影响定位的问题$(document).ready(function() { var ...
- Android软键盘弹出时布局问题
最近项目需要做一个类似聊天室的模块,基于Socket实现的,这部分稍后一段时间再做总结,功能上的相关点都实现了小例子也做出来了,最后发现一个比较腻歪的问题就是软键盘弹出时总是会把标题“挤出”屏幕,(无 ...
- 解决react-native软键盘弹出挡住输入框的问题
解决react-native软键盘弹出挡住输入框的问题 写登录页面,整体界面居中之后就出现软键盘弹出挡住输入框,用户体验不好的情况.用了RN官方的KeyboardAvoidingView组件,会有多出 ...
- ionic项目中 软键盘弹出之后的问题:
Android SDK目前提供的软键盘弹出模式接口只有两种: 一是弹出时自动回冲界面,将所有元素上顶: 一种则是不重绘界面,直接将控件元素遮住: 1. ionic 中弹出键盘遮挡住输入框(覆盖 ...
随机推荐
- java结合testng,利用excel做数据源的数据驱动实例
数据驱动部分,是自动化测试常用部分,也是参数化设计的重要环节,前面分享了,mysql.yaml做数据源,那么再来分享下excel做数据驱动 思路: 先用POI读取excel.解析读取数据,返回list ...
- Servet
一.Servlet 是单例吗 不是. 1.你可以用多个 URL 映射同一个 Servlet.这样就会出现多个实例. 2.看看 Servlet 定义: 引用 For a servlet not host ...
- Confluence 6 管理协同编辑 - 最大编辑者的限制
我们限制为最多 12 个用户可以同时对一个页面进行编辑.这个意味着当一个页面已经有 12 个用户正在编辑了,13 个用户是不能进入编辑界面的,直到 12 个用户中有一个用户已经离开了. 系统管理员可以 ...
- Confluence 6 配置验证码(Captcha)来防止垃圾
如果你的 Confluence 站点是对公众开放的(允许匿名用户使用,添加评论,创建页面等),你可能会发现你的站点会被自动创建很多垃圾页面,评论或者其他垃圾内容. 你可以配置让 Confluence ...
- Confluence 6 临时目录(安装目录)
temp 目录是由 Java 运行时进行配置的,同时一些 Confluence 的组件将会写入历史文件或者锁定文件到这个目录中. 临时目录位于安装目录下的 /temp 目录中. 希望修改这个目录的位置 ...
- Confluence 6 已经存在的 Confluence 安装配置一个数据源连接
如果你希望在使用 JDBC 直接方式的应用中切换到使用数据源: 停止 Confluence. 备份下面的文件,以防止你可能需要重新恢复你的配置: <installation-directory& ...
- LeetCode(106):从中序与后序遍历序列构造二叉树
Medium! 题目描述: 根据一棵树的中序遍历与后序遍历构造二叉树. 注意:你可以假设树中没有重复的元素. 例如,给出 中序遍历 inorder = [9,3,15,20,7] 后序遍历 posto ...
- 闭包&装饰器
闭包 1.函数引用 def test(): print('--test--') # 调用函数 test() # 引用函数 ret = test print(id(ret)) print(id(test ...
- Little Red Riding Hood
问题 : Little Red Riding Hood 时间限制: 1 Sec 内存限制: 1280 MB 题目描述 Once upon a time, there was a little gir ...
- Nginx详解十七:Nginx深度学习篇之动静分离
动静分离:通过中间件将动态请求和静态请求分离 作用:分离资源,减少不必要的请求消耗,减少请求延时 动静分离还有个好处就是,当动态请求的后端服务出问题了,只会影响动态的部分,静态资源不影响,照样加载 如 ...