最新消息:欢迎光临!

ios uiwebview禁止双击缩放/居中

css3/html5 findever 4790浏览 0评论

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

    经过测试,fixed定位的元素会随着双击的页面移动而移动(实际响应区域),但是展示的效果还是在原来fixed定位的位置没有变,什么意思呢,简单来说就是,fixed元素实际上已经跟页面跑了,但是是偷偷摸摸的。。。你看到的它还在原来的位置老老实实地带着。。。

    好吧,既然知道了原因,解决起来就方便多了,双击事件引起的,那么就禁用掉双击事件ok,反正咱不用~~~~但还有个小问题就是,ios 的webview没有提供双击事件监听,需要模拟监听下,也就是监听两次点击时间间隔不超过500ms视为一次双击事件,具体怎么操作,还是看国外的大神代码吧! http://appcropolis.com/blog/howto/implementing-doubletap-on-iphones-and-ipads//

    自己根据这个写了点代码:

    

// 阻止ios下默认双击 自动缩放/内容居中 事件
$(function() {
	var system = baseJS.App.getSystem();  // 判断当前的系统,ios的就xx,其他的就放过吧
	if (system.ios) {
		var action;
		$('body').bind('touchend', function(event) {
			var now = new Date().getTime();
			var lastTouch = $(this).data('lastTouch') || now + 1;
			var delta = now - lastTouch;
			clearTimeout(action);
			if (delta < 500 && delta > 0) {
				// 双击事件
				console.log('dbclick');
				event.preventDefault();
			} else {
				$(this).data('lastTouch', now);
				action = setTimeout(function(e) {
					clearTimeout(action);
				}, 500, [event]);
			}
			$(this).data('lastTouch', now);
		});
	}
});

转载请注明:Findever » ios uiwebview禁止双击缩放/居中

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址