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


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 相关文章推荐
表单填写时用回车代替TAB的实现方法
Oct 09 Javascript
使用JavaScript动态设置样式实现代码及演示动画
Jan 25 Javascript
JS中FRAME的操作问题实例分析
Oct 21 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
Dec 08 Javascript
AngularJS基础 ng-model 指令详解及示例代码
Aug 02 Javascript
JavaScript和JQuery获取DIV值的方法示例
Mar 07 Javascript
详解vue渲染从后台获取的json数据
Jul 06 Javascript
脚手架vue-cli工程webpack的基本用法详解
Sep 29 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
May 18 Javascript
Vue项目总结之webpack常规打包优化方案
Jun 06 Javascript
Vue组件间的通信pubsub-js实现步骤解析
Mar 11 Javascript
TypeScript 运行时类型检查补充工具
Sep 28 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
火影忍者:三大瞳力之一的白眼,为什么没有写轮眼那么出色?
2020/03/02 日漫
ThinkPHP单字母函数(快捷方法)使用总结
2014/07/23 PHP
分享php多功能图片处理类
2016/05/15 PHP
php正则判断是否为合法身份证号的方法
2017/03/16 PHP
基于jQuery的淡入淡出可自动切换的幻灯插件
2010/08/24 Javascript
改写一个简单的菜单 弹性大小
2010/12/02 Javascript
js给onclick事件赋值,动态传参数实例解说
2013/03/28 Javascript
浅析JavaScript中两种类型的全局对象/函数
2013/12/05 Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
2014/04/02 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
2015/02/03 Javascript
VC调用javascript的几种方法(推荐)
2016/08/09 Javascript
AngularJS表达式讲解及示例代码
2016/08/16 Javascript
node.js中EJS 模板快速入门教程
2017/05/08 Javascript
解决iview打包时UglifyJs报错的问题
2018/03/07 Javascript
解决iview多表头动态更改列元素发生的错误的方法
2018/11/02 Javascript
JS使用Dijkstra算法求解最短路径
2019/01/17 Javascript
VUE 自定义组件模板的方法详解
2019/08/30 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
2019/09/21 Javascript
Javascript实现秒表计时游戏
2020/05/27 Javascript
微信小程序用户登录和登录态维护的实现
2020/12/10 Javascript
jquery实现拖拽小方块效果
2020/12/10 jQuery
Python中统计函数运行耗时的方法
2015/05/05 Python
Python利用正则表达式匹配并截取指定子串及去重的方法
2015/07/30 Python
使用python 和 lint 删除项目无用资源的方法
2017/12/20 Python
我喜欢你 抖音表白程序python版
2019/04/07 Python
python 列表、字典和集合的添加和删除操作
2019/12/16 Python
python连接mysql有哪些方法
2020/06/24 Python
使用Python实现微信拍一拍功能的思路代码
2020/07/09 Python
通过实例解析python and和or使用方法
2020/11/14 Python
澳大利亚巧克力花束和礼品网站:Tastebuds
2019/03/15 全球购物
董事长助理工作职责
2014/06/08 职场文书
2014年节能工作总结
2014/12/18 职场文书
先进基层党组织事迹材料
2014/12/25 职场文书
Django cookie和session的应用场景及如何使用
2021/04/29 Python
python自动计算图像数据集的RGB均值
2021/06/18 Python
postgresql之greenplum字符串去重拼接方式
2023/05/08 PostgreSQL