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


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 相关文章推荐
获取URL地址中的文件名和参数的javascript代码
Sep 02 Javascript
Jquery 动态添加按钮实现代码
May 06 Javascript
jquery获取css中的选择器(实例讲解)
Dec 02 Javascript
window.print打印指定div实例代码
Dec 13 Javascript
举例讲解Node.js中的Writable对象
Jul 29 Javascript
JavaScript中获取HTML元素值的三种方法
Jun 20 Javascript
Node.js查找当前目录下文件夹实例代码
Mar 07 Javascript
对vux点击事件的优化详解
Aug 28 Javascript
彻底弄懂 JavaScript 执行机制
Oct 23 Javascript
对vuex中getters计算过滤操作详解
Nov 06 Javascript
vuex实现购物车功能
Jun 28 Javascript
vue动态设置路由权限的主要思路
Jan 13 Vue.js
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
建站常用13种PHP开源CMS比较
2009/08/23 PHP
php 定界符格式引起的错误
2011/05/24 PHP
CMS中PHP判断系统是否已经安装的方法示例
2014/07/26 PHP
PHP实现生成唯一会员卡号
2015/08/24 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
jQuery UI-Draggable 参数集合
2010/01/10 Javascript
jQuery代码优化 选择符篇
2011/11/01 Javascript
探讨javascript是不是面向对象的语言
2013/11/21 Javascript
怎么选择Javascript框架(Javascript Framework)
2013/11/22 Javascript
html5+javascript制作简易画板附图
2014/04/25 Javascript
JavaScript避免内存泄露及内存管理技巧
2014/09/05 Javascript
Angular2里获取(input file)上传文件的内容的方法
2017/09/05 Javascript
微信小程序使用modal组件弹出对话框功能示例
2017/11/29 Javascript
vue-devtools的安装和使用步骤详解
2019/10/17 Javascript
小程序实现左滑删除的效果的实例代码
2020/10/19 Javascript
python爬虫入门教程之点点美女图片爬虫代码分享
2014/09/02 Python
python开发之字符串string操作方法实例详解
2015/11/12 Python
python 简单的多线程链接实现代码
2016/08/28 Python
Python生成rsa密钥对操作示例
2019/04/26 Python
Python2.7实现多进程下开发多线程示例
2019/05/31 Python
Python3 翻转二叉树的实现
2019/09/30 Python
使用python绘制温度变化雷达图
2019/10/18 Python
Python之Class&Object用法详解
2019/12/25 Python
TensorFlow Saver:保存和读取模型参数.ckpt实例
2020/02/10 Python
Python如何在main中调用函数内的函数方式
2020/06/01 Python
CSS3实现彩色进度条动画的示例
2020/10/29 HTML / CSS
美国女孩服装购物网站:Justice
2017/03/04 全球购物
北美领先的牛仔品牌:Buffalo David Bitton
2017/05/22 全球购物
我看到了用指针调用函数的不同语法形式
2014/07/16 面试题
业务主管岗位职责范本
2013/12/25 职场文书
2014公安机关纪律作风整顿思想汇报
2014/09/13 职场文书
财政专业大学生职业生涯规划书
2014/09/17 职场文书
父亲节寄语大全
2015/02/27 职场文书
社区公民道德宣传日活动总结
2015/03/23 职场文书
决心书格式及范文
2019/06/24 职场文书
Win11无法安装更新补丁KB3045316怎么办 附KB3045316补丁修复教程
2022/08/14 数码科技