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. 用Navicat for mysql连接mysql报错1251-解决办法

    今天下了个 MySQL8.0,发现Navicat连接不上,总是报错1251: 原因是MySQL8.0版本的加密方式和MySQL5.0的不一样,连接会报错. 试了很多种方法,终于找到一种可以实现的: 更 ...

  2. 基于Java Properties类设置本地配置文件

    一.Java Properties类介绍 Java中有个比较重要的类Properties(Java.util.Properties),主要用于读取Java的配置文件,各种语言都有自己所支持的配置文件, ...

  3. Pascal代码自动格式化

    const WEnter=; key=; next_line:..WEnter]of string=(';','begin','else','then','repeat','do','var'); k ...

  4. Matrix Power Series

    Matrix Power Series 给出矩阵A,求矩阵\(A+A^2+...+A^k\)各个元素\(mod\ yyb\)的值,\(n\leq 30,k\leq 10^9,yyb\leq 10^4\ ...

  5. LoadRunner例子：检查点为参数的一个例子

    LoadRunner例子:检查点为参数的一个例子 检查点是LoadRunner的一个功能,用来验证业务功能的正确性.如果检查的内容是变化的,脚本该如何写呢? 问题提出:LoadRunner订票网站例子 ...

  6. WPF 深入浅出学习 Day1

  7. 廖雪峰Java14Java操作XML和JSON-1XML-2DOM

    XML是一种数据表示形式. 可以描述非常复杂的数据数据结构 用于传输和传输数据 DOM:Document Object Model DOM模型就是把XML文档作为一个树形结构,从根结点开始,每个节点都 ...

  8. 廖雪峰Java14Java操作XML和JSON-1XML-1XML介绍

    1.XML:可扩展标记语言(extensible Markup Language) 是一种数据表示格式 可以描述非常复杂的数据结构 用于存储和传输数据 1.1XML特点: 1.纯文本,默认utf-8编 ...

  9. csps-s模拟测试60嘟嘟噜，天才绅士少女助手克里斯蒂娜，凤凰院凶真题解

    题面:https://www.cnblogs.com/Juve/articles/11625190.html 嘟嘟噜: 约瑟夫问题 第一种递归的容易re,但复杂度较有保证 第二种适用与n大于m的情况 ...

  10. JS 计算时间范围，最近一周、一个月

    //最近一周 getDay(-7) 返回的是距离当前日期的一周后的时间//一月 getDay(-30)//一年 getDay(-365) function getDay(day){ var today ...