解决ios双击页面上移问题
做webapp时,ios有个默认双击事件,会缩放页面,并将当前点击的位置居中到屏幕,本来也没什么,但是当页面中有fixed定位的元素时,这时候你就会神奇的发现,fixed元素所见不所得了!
还有就是页面会上移...
//解决ios双击页面上移问题
//在项目中测试不紧input/button这些表单控件有这个问题,p,div等也有问题,于是乎就直接在body开刀了
(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);
} })(); //下面是国外coder给的解决方案
//http://appcropolis.com/blog/howto/implementing-doubletap-on-iphones-and-ipads
(function($){
    // Determine if we on iPhone or iPad
    var isiOS = false;
    var agent = navigator.userAgent.toLowerCase();
    if(agent.indexOf('iphone') >= 0 || agent.indexOf('ipad') >= 0){
           isiOS = true;
    }
    $.fn.doubletap = function(onDoubleTapCallback, onTapCallback, delay){
        var eventName, action;
        delay = delay == null? 500 : delay;
        eventName = isiOS == true? 'touchend' : 'click';
        $(this).bind(eventName, function(event){
            var now = new Date().getTime();
            var lastTouch = $(this).data('lastTouch') || now + 1 /** the first time this will make delta a negative number */;
            var delta = now - lastTouch;
            clearTimeout(action);
            if(delta<500 && delta>0){
                if(onDoubleTapCallback != null && typeof onDoubleTapCallback == 'function'){
                    onDoubleTapCallback(event);
                }
            }else{
                $(this).data('lastTouch', now);
                action = setTimeout(function(evt){
                    if(onTapCallback != null && typeof onTapCallback == 'function'){
                        onTapCallback(evt);
                    }
                    clearTimeout(action);   // clear the timeout
                }, delay, [event]);
            }
            $(this).data('lastTouch', now);
        });
    };
})(Zepto);
//usage:
$(selector).doubletap(
    /** doubletap-dblclick callback */
    function(event){
        alert('double-tap');
    },
    /** touch-click callback (touch) */
    function(event){
        alert('single-tap');
    },
    /** doubletap-dblclick delay (default is 500 ms) */
    400
);
//下面是国外coder给的解决方案--end
//解决ios双击网面上移问题--end
解决ios双击页面上移问题的更多相关文章
- 解决ios微信页面回退不刷新的问题
		
在回退后需要刷新的页面加以下js $(function () { var isPageHide = false; window.addEventListener('pageshow', fun ...
 - 解决ios手机页面overflow scroll滑动很卡的问题
		
在移动端html中经常出现横向/纵向滚动的效果,但是在iPhone中滚动速度很慢,感觉不流畅,有种卡卡的感觉,但是在安卓设备上没有这种感觉; 要解决这个问题很简单: 一行代码搞定 -webkit-ov ...
 - 解决IOS滑动页面fixed浮动问题
		
<div style="position: fixed"></div> <div style="height: 100%; overflow ...
 - 移动端-解决ios连续点击页面上移问题
		
引入js即可 //解决ios双击页面上移问题//在项目中测试不紧input/button这些表单控件有这个问题,p,div等也有问题,于是乎就直接在body开刀了(function(){ var ag ...
 - 解决IOS微信浏览器底部会出现向前向后返回按钮,返回不刷新的问题
		
<script type="text/javascript"> //解决IOS返回页面不刷新的问题 var isPageHide = false; window.add ...
 - fastclick使用与 fastclick ios11.3相关bug原因(ios输入框点击变得不灵敏,ios input失焦后,页面上移,点击不了)
		
FastClick 移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件,这是为了检查用户是否在做双击.为了能够立即响应用户的点击事件,就有了FastClick. 安装fastc ...
 - ios兼容 input输入时弹出键盘框 页面整体上移键盘框消失后在ios上页面不能回弹的问题
		
前端h5混合开发手机端ios 当有input输入时,手机下方弹出键盘使页面上移,当输入完成,键盘消失后页面显示回到原位,但实际不能点击(可点击上方区域,有反应),也就是说实际是没有回弹. 解决办法: ...
 - 聊天界面使用IQKeyboardManager导航栏及整个页面上移的解决方法
		
问题: 使用第三方库IQKeyboardManager时会使整个页面上移,导航栏页偏移出了显示范围.在聊天界面就会使得上面的消息看不到. 解决方法: 首先说明:在聊天界面使用IQKeyboardMan ...
 - 移动端上传照片 预览+Draw on Canvas's Demo(解决 iOS 等设备照片旋转 90 度的 bug)
		
背景: 本人的一个移动端H5项目,需求如下: 需求一:手机相册选取或拍摄照片后在页面上预览 需求二:然后绘制在canvas画布上 这里,我们先看一个demo(http://jsfiddle.net/q ...
 
随机推荐
- (原)测试intel的并行计算pafor
			
转载请注明出处: http://www.cnblogs.com/darkknightzh/p/4988264.html 参考网址: 关于mt19937:http://www.cnblogs.com/e ...
 - 解决MySQL中文乱码的问题
			
遇到中文乱码问题,首先用status命令检查数据库的配置,如下: 上图会显示数据库配置的各项信息. 还可以用 show create database XXX,来显示创建数据库的时候的编码设置. 一般 ...
 - URL锚点定位
			
我们都知道<a>标签中的url属性有三种值: 绝对 URL - 指向另一个站点(比如 href="http://www.example.com/index.htm") ...
 - 'unicodeescape' codec can't decode bytes in position 2-3: truncated \UXXXXXXXX escape
			
python IO操作的时候出现这种错误,检查一些url的目录 这个时候需要注意一下一般的dir举例是:“F:\DOCUMENT\4.7” 需要修改成为:F:/DOCUMENT/4.7
 - build.gradle中引入jar
			
只需在 dependencies{}中添加: compile fileTree(include: ['*.jar'], dir: 'libs')
 - Linux Ubuntu download
			
下载地址:http://www.ubuntu.com/download/ Ubuntu桌面用户版 符合用户个性的版本
 - JavaScript prototype.js提升JavaScript开发效率
			
参考链接:http://www.yiibai.com/prototype/ Prototype提供主要方法类别: Prototype概述 Prototype实用功能 Prototype实用方法 Pro ...
 - IA32与x86
			
64位机器相比于32位优点 ①访问虚拟地址范围更大 ②更多的寄存器 ③过程较简单 ④采用条件传送指令 详细看:http://baike.baidu.com/link?url=DoRp7iW_z3cE6 ...
 - Jump Game 解答
			
Question Given an array of non-negative integers, you are initially positioned at the first index of ...
 - LeeCode-Remove Element
			
Given an array and a value, remove all instances of that value in place and return the new length. T ...