我们公司有一个页面底部用到了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. codevs1069关押罪犯（并查集）

    题目描述 Description S 城现有两座监狱,一共关押着N 名罪犯,编号分别为1~N.他们之间的关系自然也极 不和谐.很多罪犯之间甚至积怨已久,如果客观条件具备则随时可能爆发冲突.我们用“怨 ...

  2. Url Rewrite IIS 配置

    在configuration节点下 <system.webServer> <rewrite> <rules> <rule name="rD" ...

  3. Amabri添加YDB报错

    点部署直接出现如下图: 通过查看日志: tail -f /var/log/ambari-server/ambari-server.log java.lang.RuntimeException: Una ...

  4. HDU 4403 A very hard Aoshu problem(DFS)

    A very hard Aoshu problem Problem Description Aoshu is very popular among primary school students. I ...

  5. CodeForces 709C Letters Cyclic Shift

    贪心. 肯定是两个$a$之间的那些字符都$-1$,没有$a$就全部$-1$.如果输入的串全是$a$,那么把最后一个$a$改成$z$. #pragma comment(linker, "/ST ...

  6. 用maven在eclipse用spring建javaweb工程（一）

    一,步骤   只标注重点步骤: 新建工程选择Maven Project next---next---选择web工程 next---命名如下: 点击finish创建完成. 二,index.jsp和pom ...

  7. openstack私有云布署实践【10.1 计算nova - kxcontroller节点配置（科兴环境）】

    一.首先登录kxcontroller1创建kx_nova数据库,并赋于远程和本地访问的权限.     mysql -u root -p   CREATE DATABASE kx_nova; GRANT ...

  8. struts2查询的数据的存放

    当我们查询数据的时候,把它存放到一个位置.以供页面显示. 1:使用***Map取代内置对象存放 public String query(){ ActionContext.getContext().pu ...

  9. C#第十天

    1.c#中的访问修饰符 public :公开的公共的 private:私有的,只能在当前类的内部访问 protected:受保护的,只能在当前类的内部以及该类的子类中访问. internal:只能在当 ...

  10. 5、sha1加密的一个坑

    OC语言写的sha1加密算法,在网上随手可以搜索到(如下便是),但是我不得不说有一些人不责任,没有提醒大家导入必要的系统头文件,从而导致错误 + (NSString *) sha1:(NSString ...