发现在 iphone 手机中即使设置了 <meta>
也无法禁止缩放的问题。
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
复制代码
如果你懒得看上面的文章,那么大意是这些属性本来是通过合适的设置来增强用户体验的,结果大部分情况下都被直接设置成禁止缩放,造成低分辨率设备上很难看清文字。所以 Webkit 在 iOS 10 后不再对这样的设置生效。
不过有些专为手机端设计的单页面应用,在禁止用户缩放后能带来更好的用户体验,那么在 safari 上要如何设置呢。
我在网上搜索了一些答案,可惜的是这些答案目前已经无法正常使用了。
// 已经失效的代码
window.onload = function () {
document.addEventListener('touchstart', function (event) {
if (event.touches.length > 1) {
event.preventDefault();
}
});
var lastTouchEnd = 0;
document.addEventListener('touchend', function (event) {
var now = (new Date()).getTime();
if (now - lastTouchEnd <= 300) {
event.preventDefault();
}
lastTouchEnd = now;
}, false);
};
复制代码
上面这个例子在通过检测触摸的手指数量,如果大于2个指头则禁止默认事件触发。如果300毫秒内快速点击也禁止默认事件触发。
不过双指缩放无法正常工作。
在 chrome 中发现这边 touchstart
事件被自动添加了 passive:true
,这个属性是干什么的呢,一句话解释起来就是事件回调函数中的 event.preventDefault()
都不生效。
// 改进后的事件监听
window.onload = function () {
document.addEventListener('touchstart', function (event) {
if (event.touches.length > 1) {
event.preventDefault();
}
}, {
passive: false // 关闭被动监听
});
var lastTouchEnd = 0;
document.addEventListener('touchend', function (event) {
var now = (new Date()).getTime();
if (now - lastTouchEnd <= 300) {
event.preventDefault();
}
lastTouchEnd = now;
}, false);
};
复制代码
罗小黑写写文字
如果喜欢文章 请留下一个赞~ 如果喜欢文章 分享给更多人~
自由转载-非商用-非衍生-保持署名(创意共享3.0许可证) 转载时请保留原文链接 以保证可及时获取对文章的订正和修改