我们公司有一个页面底部用到了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. 在SQL SERVER中查找用分隔符分隔的数据

    SELECT * FROM [DB_SCJC].[dbo].[tn_Manager] 其中, CHARINDEX({1},{2})中,{1}是要查找的字符,{2}是字典库.返回值为{1}在{2}中的位 ...

  2. DrawingCombiner——CAD图纸批量合并软件

    DrawingCombiner是一款CAD图纸批量合并软件,可以批量合并多个dwg或dxf文件为单个dwg文件,并可以设置合并后的排列方式. 此程序附属MagicTable(可到依云官网下载:http ...

  3. Win32窗口

    #include <Windows.h> #include <CommCtrl.h> #pragma comment(lib, "comctl32.lib" ...

  4. perl's Favorite Default: $_

    If you omit the control varibele from the beiginning of foreach loop, Perl uses its favrorite defaul ...

  5. java操作mongodb——插入数据

    在mongodb中,表(Table)被称之为集合(Collection),记录(Record)被称为文档(Document) 首先连接到数据库 MongoClient mongoClient = ne ...

  6. nginx在window上无法启动的问题

    内容列表: 简要介绍 下载安装 配置测试 一.简要介绍 Nginx ("engine x") 是一个高性能的 HTTP 和 反向代理 服务器,也是一个 IMAP/POP3/SMTP ...

  7. Java中的native关键字与JNI

    一.先说一下大致的意思: jdk提供的类库源代码中有一些方法没有实现,这些方法前有native关键字,如object类中的 : native Object clone() throws CloneNo ...

  8. flex flashplayer 程序 和 air 程序 通过 LocalConnection 通信

    flashplayer 做控制端: <?xml version="1.0" encoding="utf-8"?> <s:Application ...

  9. out和ref之间的区别

    首先:两者都是按引用传递的,使用后都将改变原来参数的数值. 其次:ref可以把参数的数值传递进函数,但是out是要把参数清空,就是说你无法把一个数值从out传递进去的,out进去后,参数的数值为空,所 ...

  10. ArcGIS 10.5 named user介绍

    1           Named user概述 1.1    Named user简介 Named user是ArcGIS产品自10.3版本正式推出的一种以用户为中心的授权机制,也称"授权 ...