我们公司有一个页面底部用到了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. kinect1在ros-indigo环境配置

    根据周大神前车,向git下载驱动里面有详细的安装说明 $ cd $ git clone https://github.com/ZXWBOT/kinect_driver.git 按照安装说明三个包安装成 ...

  2. qsort()函数（C）

    qsort包含在<stdlib.h>头文件中,此函数根据你给的比较条件进行快速排序,通过指针移动实现排序.排序之后的结果仍然放在原数组中.使用qsort函数必须自己写一个比较函数. 函数原 ...

  3. 走迷宫 （nyoj 306）

    学习自此博客题解 二分搜索+深搜.二分枚举最小差距值(路径上的最大值与最小值的差距),枚举的最小值为abs(a[1][1]-a[n][n]),最大值为题目给出的120.搜索时代入这个最小差距值,若存在 ...

  4. hdu 1907 John&& hdu 2509 Be the Winner（基础nim博弈）

    Problem Description Little John is playing very funny game with his younger brother. There is one bi ...

  5. VR行业未来是会走向巅峰还是会归于落寞？

    日前591ARVR资讯网www.591arvr.com根据有关市场调研机构的权威数据分析进行预测表明,全球VR头显出货量将达到1.3亿部,但是现在市场数字不过年出货1700万部,这一部分VR并不指的是 ...

  6. 【Python】0/1背包、动态规划

    0/1背包问题:在能承受一定重量的背包中,放入重量不同,价值不同的几件物品,怎样放能让背包中物品的价值最大? 比如,有三件物品重量w,价值v分别是 w=[5,3,2] v=[9,7,8] 包的容量是5 ...

  7. 接口速度慢问题查找（TTFB时间长）

    前些天自己写了一个网站,但是发现接口的速度按超级慢,业务逻辑并不复杂,原因究竟在哪呢? 首先说一下,我的数据库和项目均在同一台服务器上,按道理来说,接口访问本地的数据库应该会很快才对. 后来我发现线上 ...

  8. Elastarchsearch安装搭建（一）

    Elasticsearch是一个实时分布式搜索和分析引擎.一个基于Apache Lucene(TM)的开源搜索引擎.无论在开源还是专有领域,Lucene可以被认为是迄今为止最先进.性能最好的.功能最全 ...

  9. Java线程小记

    线程是程序内部不同的执行分支,实现多线程主要有两种方式:继承自Thread类或实现Runnable接口,其实Thread类也是实现了Runnable接口,基于Java的单继承机制,我们建议使用实现Ru ...

  10. iOS消息推送相关

    远程推送 iOS开发之实现App消息推送:http://blog.csdn.net/shenjie12345678/article/details/41120637 国内90%以上的iOS开发者,对A ...