ios移动端在双击弹出层的时候会出现页面下移，露出底层页面的现象

解决办法：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <script>

            (function() {

                var agent = navigator.userAgent.toLowerCase(); //检测是否是ios

                var iLastTouch = null; //缓存上一次tap的时间

                if(agent.indexOf('iphone') >= 0 || agent.indexOf('ipad') >= 0) {

                    document.body.addEventListener('touchend', function(event) {

                        var iNow = new Date().getTime();

                        iLastTouch = iLastTouch || iNow + 1 /** 第一次时将iLastTouch设为当前时间+1 */ ;

                        var delta = iNow - iLastTouch;

                        if(delta < 500 && delta > 0) {

                            event.preventDefault();

                            return false;

                        }

                        iLastTouch = iNow;

                    }, false);

                }

            })();

        </script>

    </body>

</html>

解决ios移动端双击页面下移的更多相关文章

  1. vue项目引入FastClick组件解决IOS系统下h5页面中的按钮点击延迟，连续点击无反应的问题

    异常描述: ios系统手机中访问h5页面,按钮点击有延迟,连续点击卡顿.无反应. 异常原因: 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题:当时的网站都是为大屏幕设 ...

  2. 解决IOS移动端 Safari流浪器 onclick无法触发的问题

    在移动端布局的时候, 在底部有一个button, 页面超过两屏, 是一个可滚动的的网页, 当运行在移动端Safari浏览器上的时候, 向下滑动页面, 浏览器的头部和尾部会自动隐藏, 这样可视区域就会变 ...

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

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

  4. 解决IOS移动端固定定位失效问题

    根据浏览器窗口position:fixed; 定位在底部的元素,会随着屏幕的滚动而滚动,在iOS系统上不起作用. <div class="header">头部</ ...

  5. 解决IOS下window.open页面打不开问题

    问题如标题所写,在ajax回调里面拿到即将要跳转的链接url,使用window.open(linkUrl),没有起作用,而且代码也没有报错,查找原因是:大部分现代的浏览器(Chome/Firefox/ ...

  6. 移动端-解决ios连续点击页面上移问题

    引入js即可 //解决ios双击页面上移问题//在项目中测试不紧input/button这些表单控件有这个问题,p,div等也有问题,于是乎就直接在body开刀了(function(){ var ag ...

  7. 解决ios双击页面上移问题

    做webapp时,ios有个默认双击事件,会缩放页面,并将当前点击的位置居中到屏幕,本来也没什么,但是当页面中有fixed定位的元素时,这时候你就会神奇的发现,fixed元素所见不所得了! 还有就是页 ...

  8. 【原】移动端vue页面点透事件 - 分析与解决

    近期项目遇到了vue页面事件被带到下一个页面的问题,也就是我们常说的点透事件,主要表现在android机器上,花了不少时间折腾,简单做下总结~ vue页面之间的切换通过Vue Router的route ...

  9. 移动端上传照片 预览+Draw on Canvas's Demo（解决 iOS 等设备照片旋转 90 度的 bug）

    背景: 本人的一个移动端H5项目,需求如下: 需求一:手机相册选取或拍摄照片后在页面上预览 需求二:然后绘制在canvas画布上 这里,我们先看一个demo(http://jsfiddle.net/q ...

随机推荐

  1. C# SQL 多条件查询技巧

    #region 多条件搜索时,使用List集合来拼接条件(拼接Sql) StringBuilder sql = new StringBuilder("select * from PhoneN ...

  2. Linux真好玩阿，不过我家电脑不行，运行不够流畅

    不过呢....能编程就行了....   哎,总说不用QT不用QT,最后还是没办法,用QT了   连个界面都看不到的话,感觉太差了....   我还不会用QT呢....好好学习....争取像MFC那样习 ...

  3. jQuery鼠标拖曳改变div大小（模拟textarea右下角拖曳）

    jQuery.fn.extend({ drag: function() { $(document).off("mouseup.drag").on("mouseup.dra ...

  4. 搭建react的vw架构时候报 Cannot load preset "advanced".

    原版的报错如下 Administrator@DESKTOP-EHCTIOR MINGW64 /e/821box/react-vw-layout (master) $ yarn start yarn r ...

  5. JavaScript中获取HTML元素的方式

    JavaScript中获取HTML元素的方式 1.使用id方式获取元素,返回一个具体对象   document.getElementById(id名) 2.使用className方式获取元素,返回类数 ...

  6. linux 软件 手动添加至桌面或启动栏

    1.创建软连接(也可以不用创建软连接,直接写绝对路径) sudo ln -s /opt/eclipse/eclipse /usr/bin/eclipse 2.创建desktop文件 sudo gedi ...

  7. 为WCF增加UDP绑定（储备篇）

    日前我开发的服装DRP需要用到即时通信方面的技术,比如当下级店铺开出零售单时上级机构能实时收到XX店铺XX时XX分卖出XX款衣服X件之类的信息,当然在上级发货时,店铺里也能收到已经发货的提醒.即时通信 ...

  8. 33 N皇后问题

    原题网址:https://www.lintcode.com/zh-cn/old/problem/n-queens/# n皇后问题是将n个皇后放置在n*n的棋盘上,皇后彼此之间不能相互攻击. 给定一个整 ...

  9. x64：x64

    ylbtech-x64:x64 “x86-64”,有时会简称为“x64”,是64位微处理器架构及其相应指令集的一种,也是Intel x86架构的延伸产品.“x86-64”1999由AMD设计,AMD首 ...

  10. PAT甲级——A1095 Cars on Campus

    Zhejiang University has 8 campuses and a lot of gates. From each gate we can collect the in/out time ...