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 中弹出键盘遮挡住输入框(覆盖 ...
随机推荐
- Gitbook
2017年9月13日 17:12:20 星期三 gitbook 可以将markdown格式的文件编译成html格式 放在当前目录里的_book目录里(需要手动创建, 也可以指定编译后的html文件放到 ...
- FS G729转码测试记录
默认情况下Freeswitch自带的G729模块是pass-through-并不支持转码.我们决定添加一个支持G729转码的模块到Freeswitch.参考自 8000HZ. 一.安装支持转码的G72 ...
- Light OJ 1020
简单推理题: #include<bits/stdc++.h> using namespace std; int main() { int T, n; string Name; cin &g ...
- android7.0以上使用融云即使通讯的坑
一.连接服务器不走connect()方法 在android6.0以下,在使用融云sdk时,直接将依赖库引入到项目中即可.但是在7.0及以上时,直接应用会发现消息一直发送不出去,错误提示为dlopen ...
- liunx 安装 mysql 5.6
第一步 解压文件 目录切换到/usr/local/ cd /usr/local/ 解压 tar zxvf mysql-5.6.33-linux-glibc2.5-x86_64.tar.gz 重命名为 ...
- 一篇文章教你读懂UI绘制流程
最近有好多人问我Android没信心去深造了,找不到好的工作,其实我以一个他们进行回复,发现他们主要是内心比较浮躁,要知道技术行业永远缺少的是高手.建议先阅读浅谈Android发展趋势分析,在工作中, ...
- Confluence 6 后台中的默认空间模板设置
Confluence 6 后台中的默认空间模板设置界面的布局. https://www.cwiki.us/display/CONFLUENCEWIKI/Customizing+Default+Spac ...
- MySQL、MongoDB、Redis 数据库之间的区别
NoSQL 的全称是 Not Only SQL,也可以理解非关系型的数据库,是一种新型的革命式的数据库设计方式,不过它不是为了取代传统的关系型数据库而被设计的,它们分别代表了不同的数据库设计思路. M ...
- Laravel 项目中使用 Bootstrap 框架
Laravel 如何引入 Bootstrap 如官方文档所言,Laravel 并不强制你使用 CSS 框架,但是开箱提供了对 Bootstrap 的支持,在 resources/js/bootstra ...
- PDF编辑方法,PDF如何去除数字签名
有些人会在PDF文件中添加数字签名,但当PDF文件有数字签名的时候就无法对PDF文件进行编辑.添加等操作.这个时候就需要去除PDF文件中的数字签名了,要怎么做呢,就由我来跟大家分享一下小编我的去除数字 ...