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


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 相关文章推荐
jQuery文本框(input textare)事件绑定方法教程
Apr 24 Javascript
jquery实现一个简单好用的弹出框
Sep 26 Javascript
js简单设置与使用cookie的方法
Jan 22 Javascript
node模块机制与异步处理详解
Mar 13 Javascript
JavaScript数组操作详解
Feb 04 Javascript
详解用node.js实现简单的反向代理
Jun 26 Javascript
在ABP框架中使用BootstrapTable组件的方法
Jul 31 Javascript
jQuery plugin animsition使用小结
Sep 14 jQuery
基于Node.js模板引擎教程-jade速学与实战1
Sep 17 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
Nov 20 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
Feb 10 Javascript
Windows上node.js的多版本管理工具用法实例分析
Nov 06 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
jQuery 中关于CSS操作部分使用说明
2007/06/10 Javascript
使用jquery给input和textarea设定ie中的focus
2008/05/29 Javascript
js获取div高度的代码
2008/08/09 Javascript
document.compatMode介绍
2009/05/21 Javascript
js 图片等比例缩放代码
2010/05/13 Javascript
jquery 跨域访问问题解决方法(笔记)
2011/06/08 Javascript
jquery 自定义容器下雨效果可将下雨图标改为其他
2014/04/23 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
2014/07/29 Javascript
JavaScript中的对象与JSON
2015/07/03 Javascript
js+css实现select的美化效果
2016/03/24 Javascript
JavaScript跨域调用基于JSON的RESTful API
2016/07/09 Javascript
小程序指纹验证的实现代码
2018/12/04 Javascript
vue实现微信二次分享以及自定义分享的示例
2019/03/20 Javascript
基于vue和bootstrap实现简单留言板功能
2020/05/30 Javascript
[04:52]2015国际邀请赛LGD战队晋级之路
2015/08/14 DOTA
python fabric实现远程操作和部署示例
2014/03/25 Python
Python使用面向对象方式创建线程实现12306售票系统
2015/12/24 Python
Python模块包中__init__.py文件功能分析
2016/06/14 Python
python实现远程控制电脑
2019/05/23 Python
python占位符输入方式实例
2019/05/27 Python
Python+PyQT5的子线程更新UI界面的实例
2019/06/14 Python
PIL包中Image模块的convert()函数的具体使用
2020/02/26 Python
python 实现读取csv数据,分类求和 再写进 csv
2020/05/18 Python
如何基于python把文字图片写入word文档
2020/07/31 Python
python实现每天自动签到领积分的示例代码
2020/08/18 Python
详解CSS3新增的背景属性
2019/12/25 HTML / CSS
详解html5 postMessage解决跨域通信的问题
2018/08/17 HTML / CSS
Canvas系列之滤镜效果
2019/02/12 HTML / CSS
前台文员我鉴定
2014/01/12 职场文书
七夕相亲活动策划方案
2014/08/31 职场文书
英语辞职信范文
2015/02/28 职场文书
2015年办公室文员工作总结
2015/04/24 职场文书
幸福来敲门观后感
2015/06/04 职场文书
小学语文的各类谚语(70首)
2019/08/15 职场文书
MySQL获取所有分类的前N条记录
2021/05/07 MySQL
三星 3nm 芯片将于第二季度开始量产
2022/04/29 数码科技