做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禁止双击缩放/居中