我们公司有一个页面底部用到了fixed样式，每当弹出键盘的时候，IOS下fixed就会走样(据我所知android没有该问题)。

为此之前我经过产品的同意做了简单的处理（方法1）。

方法一：

focus的时候让fixed块position变为relative，这是最简单的处理方法。

下面是我的小demo

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="utf-8">

    <meta http-equiv="pragma" content="no-cache" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui" />

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        .input {

            margin:10px 10px 400px 10px;

            width: 200px;

            height: 30px;

            border: 1px solid #ccc;

            display: block;

        }

        .next {

            width: 100%;

            height: 44px;

            line-height: 44px;

            background: orangered;

            position: fixed;

            bottom:0;

            color:#fff;

            text-align: center;

        }

        .pos-rel {

            position: relative;;

        }

    </style>

    <script src="../js/zepto.js"></script>

</head>

<body>

<section class="content">

    <input class="input" type="text" />

    <input class="input" type="text" />

    <input class="input" type="text" />

    <div class="next">

        下一步

    </div>

</section>

<script>

    $(function() {

        var isIOS = (/iphone|ipad/gi).test(navigator.appVersion);

        if (isIOS) {

            $('.content').on('focus', 'input', function () {

                $('.next').addClass('pos-rel');

            }).on('focusout', 'input', function () {

                $('.next').removeClass('pos-rel');

             });

        }

    });

</script>

</body>

</html>

方法二：

position：absolute；每次滚动的时候重新算位置。

下面是我的小demo，touch的时候作了隐藏处理，input focusout和window resize的时候作了fixed位置重新计算。

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="utf-8">

    <meta http-equiv="pragma" content="no-cache" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui" />

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        .input {

            margin:10px 10px 400px 10px;

            width: 200px;

            height: 30px;

            border: 1px solid #ccc;

            display: block;

        }

        .next {

            width: 100%;

            height: 44px;

            line-height: 44px;

            background: orangered;

            position: absolute;

            color:#fff;

            text-align: center;

        }

        .pos-rel {

            position: relative;;

        }

    </style>

    <script src="../js/zepto.js"></script>

</head>

<body>

    <input class="input" type="text" />

    <input class="input" type="text" />

    <input class="input" type="text" />

    <div class="next">

        下一步

    </div>

</body>

<script>

    var isIOS = (/iphone|ipad/gi).test(navigator.appVersion);

    var likeFixed = function() {

        //解绑resize事件  以免进入死循环

        $(window).unbind('resize', likeFixed);

        var t = document.documentElement.scrollTop || document.body.scrollTop, fixed_height = 44, top;

        //网页可见高度加上滚动条高度  - fixed元素的高度

        top = window.innerHeight+ t - fixed_height;

        //设置fixed div的top

        $('.next').css({'top': top+'px' });

        //重新绑定resize事件

        setTimeout(function() {

            $(window).bind('resize', likeFixed);

        }, 10);

    }

    $(function() {

        if (isIOS) {

            likeFixed();

            function touchstart(event) {

                $('.next').css('opacity',0);

            }

            function touchend(event) {

                $('.next').css('opacity',1);

            }

            //touch的时候隐藏

            document.addEventListener("touchstart", touchstart, false);

            //滚动后重新设置fixed div的位置

            window.onscroll = likeFixed;

            //touch后显示

            document.addEventListener("touchend", touchend, false);

        }

        //所有input blur时重新计算位置，兼容chrome

        $('body').on('focusout', 'input', likeFixed);

    });

</script>

</html>

解决IOS下不支持fixed的问题的更多相关文章

  1. web页面在ios下不支持fixed可用absolute替代的方案

    本文引用出处:http://www.cnblogs.com/PeunZhang/p/3553020.html. 对于 ios4 和 android2.2 以下不支持 position:fixed 的问 ...

  2. 解决ios下audio不能正常播放的问题

    解决ios下audio不能正常播放的问题 ios系统下会自动屏蔽audio标签的自动播放,需要使用一个事件来驱动音频播放 this.$refs.startaudio.addEventListener( ...

  3. 解决ios下部分手机在input设置为readonly属性时，依然显示光标

    解决ios下部分手机在input设置为readonly属性时,依然显示光标 在出现如上所说的问题是尝试给input 加上  onfocus="this.blur()"  方法 添加 ...

  4. ios下,对于position:fixed支持不完美的额解决方案

    ios下,当有文本框时,会调用输入法,而这个时候,定位(fixed)在底部的东西,就会被弹上例,离底部有段距离,这算是个坑了. 我的解决方案是这样的. 除了定位在底部的元素外,用一个大div把其他元素 ...

  5. 解决ios下的微信打开的页面背景音乐无法自动播放

    后面的项目发现,还有两个坑,需要注意下: ·本文的解决方案的核心是利用了 微信/易信 在ready的时候会有个 WeixinJSBridgeReady/YixinJSBridgeReady事件,通过监 ...

  6. 解决ios下的微信页面背景音乐无法自动播放问题

    在做各种html5场景页面的时候,插入背景音乐是一个很普遍的需求,我们都知道,ios下的safari是无法自动播放音乐的,以至于现在行程一种认知,ios是没有办法自动播放媒体资源的,这个认知其实是错误 ...

  7. 解决IE6下不支持 png24的透明图片问题

    常用的两种解决方案: 第一:使用IE滤镜解决 关键代码: css代码  _background:none;_filter:progid:DXImageTransform.Microsoft.Alpha ...

  8. 解决IE6下Position：fixed问题(只用css)

    在IE6.0及以下版本的浏览器里是不支持position:fixed.而在IE7,IE8,firefox,opera,chrome都可以完美的支持此特性的.解决此问题的要点主要有: 1).容器要有一个 ...

  9. 解决ie6下不支持fix属性，模拟固定定位

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

随机推荐

  1. cache数据库学习周结

    学习cache数据库只有两周,下面说一下对这一数据库的理解吧.不一定对 cache数据库最大的特点是global: global就像全区变量一样,是一个广义的全局变量.数据库表中的一些重要的字段名以字 ...

  2. 关于RDD

    1. transform操作返回的是rdd, action操作返回其它数据类型,可以以此来区分操作类型: 2. Spark懒加载,懒到直到Action操作的时候才会加载数据计算,RDD的create和 ...

  3. Linux的一些简单命令(二)

    1.查看防火墙状态:service iptables status 2.开启防火墙:service iptables start 3.关闭防火墙:service iptables stop 4.创建目 ...

  4. Web前端优质学习网站

    * 官方:           W3C:http://www.w3.org/           ECMA:http://www.ecmascript.org/           Mozilla:h ...

  5. iOS UIImageView自适应图片大小

    窗口大小获取: CGRect screenBounds = [ [UIScreenmainScreen]bounds];//返回的是带有状态栏的Rect CGRect rect = [ [UIScre ...

  6. 博客停写，搬家到www.54kaikai.com

    博客搬家到自己的网站了www.54kaikai.com欢迎访问.

  7. android移动开发学习笔记（二）神奇的Web API

    本次分两个大方向去讲解Web Api,1.如何实现Web Api?2.如何Android端如何调用Web Api?对于Web Api是什么?有什么优缺点?为什么用WebApi而不用Webservice ...

  8. jquery轻松实现li标签上下滚动的原理

    在网站上我们常看到有滚动的文字或者图片,比如消息提醒,新闻列表,等等.那么这些效果是怎么形成的呢?经过查阅,找到一种十分方便的写法,经过改良,得出我自己的终极版滚动效果. 我先写个布局吧 <di ...

  9. 子查询 此处该用AND 而不是 WHERE

    条件:有一张账户表,一张订单表. 需求:求出所有role = 2 即客服人员,所有操作成功的订单数量.结果:能查出所有的客服人员名称,以及操作的订单数量(关键点在于,没有操作过订单,则数量显示为0) ...

  10. Delphi水晶横向竖向打印

    最近做一个打印项目,本来报表已经设为横向打印了,可是运行程序,打印出来的是竖向的,非要在打印机里再设定为横向,郁闷了很久,看看UCrpe32的源码之后,由于我重新封装了TCrpe,在TCrpe的派生类 ...