我写这套博客程序的时候,在iPhone手机safari上预览,快速双击页面任意位置,页面会被放大。被放大的程度,是刚好抵消主div框架设置的左右两边的margin。而我,不想要这样的功能!
在网上搜索,iPhone禁止页面双击放大,得到的答案大多是设置meta标签viewport:
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
早几年前,上面这行代码还挺好用。而现在,随着iOS系统的更新升级,此方法已经不管用了。
继续在网上搜索,找到了新的解决方案,是用JS屏蔽touch事件,代码如下(本站JS文件就包含此代码):
var lastTouchEnd = 0;
document.documentElement.addEventListener('touchend', function (event) {
var now = Date.now();
if (now - lastTouchEnd <= 300) {
event.preventDefault();
}
lastTouchEnd = now;
}, false);
原理是,判断两次touch事件的时间间隔,如果间隔在300毫秒以内,则阻止第二个touch事件。
这段JS代码来源参考:https://www.cnblogs.com/xielisen/p/9488532.html
touch间隔300毫秒的扩展阅读:https://www.jianshu.com/p/6e2b68a93c88
分类至
JS/CSS,
含
0条评论