场景描述, 当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. 线程同步(AutoResetEvent与ManualResetEvent)

    前言 在我们编写多线程程序时,会遇到这样一个问题:在一个线程处理的过程中,需要等待另一个线程处理的结果才能继续往下执行.比如:有两个线程,一个用来接收Socket数据,另一个用来处理Socket数据, ...

  2. MVC埰坑日记 文件权限

    public static void DownLoadFile(string FileFullPath) { if (!string.IsNullOrEmpty(FileFullPath) & ...

  3. cocod2d-x 之 HelloWorld

    cocos2d-x 2.2创建项目 进入cocos2d-x-2.2/tools/project-creator,运行命令 python create_project.py -project MyGam ...

  4. magento站点还原到本地

    问题描述 首先将网站文件夹解压到xampp/htdocs/wenjianjia目录下,然后替换sql文件里的域名为localhost/wenjianjia.然后访问前台,正常.访问后台,出问题了 Ma ...

  5. Android各种访问权限Permission详解

    原文:http://jingyan.baidu.com/article/afd8f4de4688af34e386e976.html 在Android的设计中,资源的访问或者网络连接,要得到这些服务都需 ...

  6. ubuntu install opengrok

    总结: 1. 安装jdk和tomcat 2. 安装ctags 3. 解压opengrok.tar.gz包, 然后将source.war复制到tomcat/webapp下面 sudo cp -R ope ...

  7. RHEL/CentOS 6.x 系统服务详解

    PS:RHEL/CentOS 6.x的系统服务比5.x系列的要多了很多新面孔,估计很多童鞋不甚理解,网上这方面资料也很少.理解这个对运维人员是必要的,因为开启不必要的服务越 多,系统就相对越不安全.不 ...

  8. [BZOJ 1874] [BeiJing2009 WinterCamp] 取石子游戏 【博弈论 | SG函数】

    题目链接:BZOJ - 1874 题目分析 这个是一种组合游戏,是许多单个SG游戏的和. 就是指,总的游戏由许多单个SG游戏组合而成,每个SG游戏(也就是每一堆石子)之间互不干扰,每次从所有的单个游戏 ...

  9. [BZOJ 1072] [SCOI2007] 排列perm 【状压DP】

    题目链接:BZOJ 1072 这道题使用 C++ STL 的 next_permutation() 函数直接暴力就可以AC .(使用 Set 判断是否重复) 代码如下: #include <io ...

  10. George and Cards

    Codeforces Round #227 (Div. 2) E:http://codeforces.com/contest/387/problem/E 题意:给你一个n个数的序列,然后给你一个标准序 ...