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. SpringMVC的Hello World

    本次使用Maven和Spring IO platform创建SpringMVC的Hello World. 一.Maven的Pom文件内容如下: <project xmlns="http ...

  2. JavaScript特效源码(3、菜单特效)

    1.左键点击显示菜单 左键弹出式菜单[推荐][修改显示的文字及链接即可][共2步] ====1.将以下代码加入HEML的<head></head>之间: <style t ...

  3. 关系型数据库——MySQL

    [MySQL架构图] MySQL简要架构图如下图所示,引擎层以插件方式集成了不同的存储引擎,它们共用Server层对外提供服务.   连接器:用于连接管理,进行身份认证及权限相关的管理.(登录MySQ ...

  4. 【核心核心】10.Spring事务管理【TX】XML+注解方式

    转账案例环境搭建 1.引入JAR包 IOC的6个包 AOP的4个包 C3P0的1个包 MySQL的1个驱动包 JDBC的2个目标包 整合JUnit测试1个包 2.引入配置文件 log4j.proper ...

  5. 深入浅出Mybatis系列（一）---Mybatis入门[转]

    最近两年 springmvc + mybatis 的在这种搭配还是蛮火的,楼主我呢,也从来没真正去接触过mybatis, 趁近日得闲, 就去学习一下mybatis吧. 本次拟根据自己的学习进度,做一次 ...

  6. Class绑定v-bind:class

    <!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...

  7. 03_Sklearn的安装

    1.Scikit-learn库介绍:包含许多知名的机器学习算法的实现,文档完善.容易上手,丰富的API. 2.安装:创建一个基于Python3的虚拟环境(可以在已有的虚拟环境中):mkvirtuale ...

  8. Win7下SQLServer访问虚拟机上的MySQL

    一.确保Win7能telnet通MySQL端口,防火墙设置可参考http://www.cnblogs.com/ShanFish/p/6519950.html二.配置系统DSN1.在Win7上安装MyS ...

  9. 查看MySql版本号命令

    转自:https://blog.csdn.net/qq_38486203/article/details/80324014​ 这里介绍四中不同的方法,它们分别运行在不同的环境中,最后对每种方法的优劣以 ...

  10. Grep- Linux必学的60个命令

    1.作用 grep命令可以指定文件中搜索特定的内容,并将含有这些内容的行标准输出.grep全称是Global Regular Expression Print,表示全局正则表达式版本,它的使用权限是所 ...