我们公司有一个页面底部用到了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. Cocos2d-x 3.x事件分发机制总结

    在2.x中处理事件需要用到委托代理(delegate),相信学过2.x的触摸事件的同学,都知道创建和移除的流程十分繁琐.而在3.x中由于加入了C++11的特性,而对事件的分发机制通过事件分发器Even ...

  2. Spark集群搭建步骤

    问题: 参考:Spark快速入门指南 – Spark安装与基础使用

  3. kali2.0 + LAMP

    0x01 更新源 leafpad /etc/apt/sources.list #中科大kali源 deb http://mirrors.ustc.edu.cn/kali sana main non-f ...

  4. redis(1)

    一.Redis介绍 Redis 是一款开源的,基于 BSD 许可的,高级键值 (key-value) 缓存 (cache) 和存储 (store) 系统.由于 Redis 的键包括 string,ha ...

  5. 【css2、css3】css改变select选择框的样式

    效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  6. C# 语言规范_版本5.0 (第19章 附录A_文档注释)

    A. 文档注释 C# 提供一种机制,使程序员可以使用含有 XML 文本的特殊注释语法为他们的代码编写文档.在源代码文件中,可以使用特定形式的注释来指导工具从这些注释及其后的源代码元素生成 XML.使用 ...

  7. 记JavaScript的入门学习（三）

    2016.12.6晚上十点半完成JavaScript的第二章学习,看了点第三章的开头总述,都说原生js每一个知识点都可以分分钟钟让你放弃,而我在努力探索着.月末的时候就回家放假了,希望在家也可以有个小 ...

  8. 一个App从创意到最终上架到App Store里的整个过程是怎样的？

    一个App从创意到最终上架到App Store里的整个过程是怎样的? 制作App需要什么软件?应该看什么书?需要哪些设备?推到App Store里,需要注册什么网站?是否需要付费?需要什么证书之类的? ...

  9. SAP HANA学习资料大全[非常完善的学习资料汇总]

    Check out this SDN blog if you plan to write HANA Certification exam http://scn.sap.com/community/ha ...

  10. C# IIS7.0+ Web.Config 配置Session过期时间

    1. 2. 3. <sessionState mode="InProc" timeout="120"></sessionState>