手机软键盘弹出时影响布局的解决方法


Posted in Javascript onDecember 15, 2016

移动端软键盘弹出时影响布局该如何解决

1)前段时间作的移动端页面,因为高度只有1页所以用了height:100%;width:100%;

ios下点击输入框弹出软键盘时,布局没有大影响。

当输入框可能被软键盘压到时,在一部分安卓下却出了问题,华为自带浏览器和UC会有布局上的问题。

原因可能是因为,软键盘弹出时,改变了height,使height:100%,不能达到原来的高度。

解决办法:

$(document).ready(function () {
$('body').height($('body')[0].clientHeight);
});

页面加载完后,js给body一个定高。

2)以前还遇到过,移动端点击输入框时,页面向左偏移了一部分,但太久了,忘了什么浏览器了,重现不了,解决的方法是使输入框的大小居中.

PS:吐槽下华为自带浏览器和UC不识别css3的新单位,vw,vh.

 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
js变量作用域及可访问性的探讨
Nov 23 Javascript
jQuery Ajax之$.get()方法和$.post()方法
Oct 12 Javascript
浅谈Javascript如何实现匀速运动
Dec 19 Javascript
JavaScript中split() 使用方法汇总
Apr 17 Javascript
详解JavaScript的回调函数
Nov 20 Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
Nov 29 Javascript
js实现适合新闻类图片的轮播效果
Feb 05 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
May 17 Javascript
总结javascript三元运算符知识点
Sep 28 Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
Apr 19 Javascript
为什么node.js不适合大型项目
Apr 28 Javascript
如何利用React实现图片识别App
Feb 18 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
Dec 15 #Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
Dec 15 #Javascript
JavaScript实现Fly Bird小游戏
Dec 15 #Javascript
JS中对数组元素进行增删改移的方法总结
Dec 15 #Javascript
JS去除重复并统计数量的实现方法
Dec 15 #Javascript
javascript基于原型链的继承及call和apply函数用法分析
Dec 15 #Javascript
移动端脚本框架Hammer.js
Dec 15 #Javascript
You might like
SONY ICF-SW07收音机电路分析
2021/03/02 无线电
PHP日期处理函数 整型日期格式
2011/01/12 PHP
PHP字符编码问题之GB2312 VS UTF-8解决方法
2011/06/23 PHP
php递归函数怎么用才有效
2018/02/24 PHP
小议javascript 设计模式 推荐
2009/10/28 Javascript
javascript 类型判断代码分析
2010/03/28 Javascript
获得所有表单值的JQuery实现代码[IE暂不支持]
2012/05/24 Javascript
获取当前点击按钮的id用this.id实现
2014/03/17 Javascript
Javascript中Date类型和Math类型详解
2016/02/27 Javascript
javascript的列表切换【实现代码】
2016/05/03 Javascript
AngularJS基础 ng-include 指令示例讲解
2016/08/01 Javascript
JavaScript中数组常见操作技巧
2017/09/01 Javascript
详解在express站点中使用ejs模板引擎
2017/09/21 Javascript
给localStorage设置一个过期时间的方法分享
2018/11/06 Javascript
如何优雅地在vue中添加权限控制示例详解
2019/03/07 Javascript
[46:23]OG vs EG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
利用matplotlib+numpy绘制多种绘图的方法实例
2017/05/03 Python
Python 稀疏矩阵-sparse 存储和转换
2017/05/27 Python
python中文件变化监控示例(watchdog)
2017/10/16 Python
通过Python 接口使用OpenCV的方法
2018/04/02 Python
Python实现自定义顺序、排列写入数据到Excel的方法
2018/04/23 Python
python读取word文档,插入mysql数据库的示例代码
2018/11/07 Python
PyQT5 QTableView显示绑定数据的实例详解
2019/06/25 Python
python之拟合的实现
2019/07/19 Python
python 如何利用argparse解析命令行参数
2020/09/11 Python
PyCharm 2020.2.2 x64 下载并安装的详细教程
2020/10/15 Python
银行财务部实习生的自我鉴定
2013/11/27 职场文书
《美丽的丹顶鹤》教学反思
2014/04/22 职场文书
供应链金融服务方案
2014/05/25 职场文书
本科毕业生自荐信
2014/05/26 职场文书
项目申报专员岗位职责
2014/07/09 职场文书
表扬稿范文
2015/01/17 职场文书
时尚女魔头观后感
2015/06/04 职场文书
爱的教育读书笔记
2015/06/26 职场文书
python for循环赋值问题
2021/06/03 Python
浅谈Redis变慢的原因及排查方法
2022/06/21 Redis