每日一記 - 但并不日更
發(fā)現(xiàn)在 iphone 手機中即使設置了 <meta> 也無法禁止縮放的問題。
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
如果你懶得看上面的文章踱阿，那么大意是這些屬性本來是通過合適的設置來增強用戶體驗的纱昧，結(jié)果大部分情況下都被直接設置成禁止縮放，造成低分辨率設備上很難看清文字获茬。所以 Webkit 在 iOS 10 后不再對這樣的設置生效。
不過有些專為手機端設計的單頁面應用倔既，在禁止用戶縮放后能帶來更好的用戶體驗恕曲，那么在 safari 上要如何設置呢。
我在網(wǎng)上搜索了一些答案渤涌，可惜的是這些答案目前已經(jīng)無法正常使用了佩谣。
小貓無奈
// 已經(jīng)失效的代碼
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);
};
上面這個例子在通過檢測觸摸的手指數(shù)量，如果大于2個指頭則禁止默認事件觸發(fā)实蓬。如果300毫秒內(nèi)快速點擊也禁止默認事件觸發(fā)稿存。
不過雙指縮放無法正常工作。
事件
在 chrome 中發(fā)現(xiàn)這邊 touchstart 事件被自動添加了 passive:true瞳秽，這個屬性是干什么的呢瓣履，一句話解釋起來就是事件回調(diào)函數(shù)中的 event.preventDefault() 都不生效。
// 改進后的事件監(jiān)聽
window.onload = function () {
document.addEventListener('touchstart', function (event) {
if (event.touches.length > 1) {
event.preventDefault();
}
}, {
passive: false // 關閉被動監(jiān)聽
});
var lastTouchEnd = 0;
document.addEventListener('touchend', function (event) {
var now = (new Date()).getTime();
if (now - lastTouchEnd <= 300) {
event.preventDefault();
}
lastTouchEnd = now;
}, false);
};
羅小黑寫寫文字
如果喜歡文章 請留下一個贊~
如果喜歡文章 分享給更多人~自由轉(zhuǎn)載-非商用-非衍生-保持署名（創(chuàng)意共享3.0許可證）
轉(zhuǎn)載時請保留原文鏈接 以保證可及時獲取對文章的訂正和修改
