场景描述, 当document的高度不够window的高度时候,如在ip6中文档的高度比窗体的高度小,到底设计在最下方的区域没有在窗体最下方,就留有空白地方如下图的灰色部分

1、 解决初始化文档高度,让文档高度等于窗体高度,并fixed需要定位的区域在最下方

  1. (function bottonm(){
  2. if($(document).height()<$(window).height()){
  3. $('.bottom_fix').css({'position':'fixed','bottom':'0px'});
  4. $(document).height($(window).height()+'px');
  5. }
  6. })();

2、解决输入框input获取焦点得时,虚拟键盘会把fixed元素顶上去(次现在在部分安卓上能发现)如下图

  1. $('#phone').bind('focus',function(){
  2. $('.bottom_fix').css('position','static');
  3. //或者$('#viewport').height($(window).height()+'px');
  4. }).bind('blur',function(){
  5. $('.bottom_fix').css({'position':'fixed','bottom':'0'});
  6. //或者$('#viewport').height('auto');
  7. });

参考:http://www.cnblogs.com/yexiaochai/p/3561939.html

3、解决屏幕旋转也会出现以上问题

    1. $(document).bind('orientationchange',function(){
    2. if(window.orientation==90 || window.orientation==-90){
    3. $('.bottom_fix').css('position','static');
    4. }else{
    5. $('.bottom_fix').css({'position':'fixed','bottom':'0'});
    6. }
    7. });

移动端解决fixed和input获取焦点软键盘弹出影响定位的问题的更多相关文章

  1. input获取焦点软键盘弹出影响定位

    解决移动端底部fixed和input获取焦点软键盘弹出影响定位的问题$(document).ready(function() {                                var ...

  2. 周记3——解决fixed属性在ios软键盘弹出后失效的bug

    这周在做空间(“类似”qq空间)项目.首页是好友发表的说说,可以针对每条说说进行评论,评论框吸附固定在屏幕底部.此时,Bug来了...在ios上,软键盘弹出后fixed属性失效了.后来发现,ios绝大 ...

  3. js 移动端之监听软键盘弹出收起

    js 移动端关于页面布局,如果底部有position:fixed的盒子,又有input,当软键盘弹出收起都会影响页面布局.这时候Android可以监听resize事件,代码如下,而ios没有相关事件. ...

  4. 解决react-native软键盘弹出挡住输入框的问题

    解决react-native软键盘弹出挡住输入框的问题 写登录页面,整体界面居中之后就出现软键盘弹出挡住输入框,用户体验不好的情况.用了RN官方的KeyboardAvoidingView组件,会有多出 ...

  5. 小程序中点击input控件键盘弹出时placeholder文字上移

    最近做的一个小程序项目中,出现了点击input控件键盘弹出时placeholder文字上移,刚开始以为是软键盘弹出布局上移问题是传说中典型的fixed 软键盘顶起问题,因此采纳了网上搜到的" ...

  6. Android软键盘弹出时布局问题

    最近项目需要做一个类似聊天室的模块,基于Socket实现的,这部分稍后一段时间再做总结,功能上的相关点都实现了小例子也做出来了,最后发现一个比较腻歪的问题就是软键盘弹出时总是会把标题“挤出”屏幕,(无 ...

  7. Android软键盘弹出,覆盖h5页面输入框问题

    之前我们在使用vue进行 h5 表单录入的过程中,遇到了Android软键盘弹出,覆盖 h5页面 输入框 问题,在此进行回顾并分享给大家: 系统:Android 条件:当输入框在可视区底部或者偏下的位 ...

  8. android控制软键盘弹出方式

    android一把自带的软键盘弹出方式是会将布局顶上去,造成UI乱套的情况. 解决办法:方法一:在你的activity中的oncreate中setContentView之前写上这个代码getWindo ...

  9. Android 软键盘弹出,界面整体上移

    在做搜索功能的时候,点击搜索框,搜索框获取焦点,键盘弹出:现在问题出来了,android软键盘弹出的时候,android整个界面上移,布局被挤压,很难看:要解决这个问题,我们需要用到 windowSo ...

随机推荐

  1. SGU 190.Dominoes(二分图匹配)

    时间限制:0.25s 空间限制:4M 题意: 给定一个N*N的棋盘,一些格子被移除,在棋盘上放置一些1*2的骨牌,判定能否放满,并且输出任意方案. Solution: 首先考虑对棋盘的一个格子黑白染色 ...

  2. php学习代码杂记

    16/2/22 字符串连接 (1)连接运算符(“.”):它返回将右参数附加到左参数后面所得的字符串. (2)连接赋值运算符(“.=”):它将右边参数附加到左边的参数后. 相当于JS里面的 += . $ ...

  3. yum版本新增包的一般步骤

    在Jekins的自动构建环境中,有时会有在构建出的ISO中添加新应用app需求,对于采用rpm包源代码管理方式的构建环境来说,基本步骤如下: 1.下载app的src.rpm包 2.解压src.rpm包 ...

  4. vim技巧:折叠快捷键

    vim技巧:折叠快捷键 以前用的挺熟的,一段时间不用了,快捷键又忘了,不得不重新再看手册,今天专门整理一下,以后查找起来也比较方便. zc 折叠,只折叠最外层的折叠zC 对所在范围内所有嵌套的折叠点进 ...

  5. Expression Trees

    Expression Trees 只是想简单说下表达式树 - Expression Trees 目录 简介 Lambda 表达式创建表达式树 API 创建表达式树 解析表达式树 表达式树的永久性 编译 ...

  6. iOS的app 中的 埋点

    埋点 就是 挖个坑把 种子埋到土里 然后浇水  等待发芽 埋点就是 ,鬼子要进村,我们埋下地雷 埋点就是 小说中 作者欲扬先抑  或者欲擒故纵  设下的伏笔... 好了,用文学的手法很好的  解释了一 ...

  7. .Echo 命令中经常提到回显,是什么意思?

    C:\>echo on C:\>date /t2006-08-06 星期日 C:\>以上内容是在打开回显的情况下执行的,其实我们想看到的只有2006-08-06 星期日这一行内容,但 ...

  8. 转:windows下使用gvim搭建简单的IDE编译环境(支持C/C++/Python等)

    原文来自于:http://www.cnblogs.com/zhuyp1015/archive/2012/06/16/2552269.html 使用gvim在windows环境下搭建简单的IDE环境可以 ...

  9. [HDOJ 1171] Big Event in HDU 【完全背包】

    题目链接:HDOJ - 1171 题目大意 有 n 种物品,每种物品有一个大小和数量.要求将所有的物品分成两部分,使两部分的总大小尽量接近. 题目分析 令 Sum 为所有物品的大小总和.那么就是用给定 ...

  10. 如何查看SQL Server的数据库实例名

    其实一般默认就是MSSQLSERVER  (注意,就是英文大写). 点击开始,运行,services.mcs 然后查阅所有SQL Server的项,其中括号中字符串的就是实例名 reference: ...