项目交付测试的时候, 发现在 iOS12 的 Safari 浏览器中, 双击图片, 整个页面会放大, 按理说, 已经设置了 meta 属性, 可还是会出现这样的情况.

更新


[2019-12-19]

  • Initial release

记录


问题背景

iOS12 的 Safari 浏览器中, 双击任意图片(img 标签), 整个页面会被放大.

问题原因

index.html 中是有设置过 meta 属性的:

1
2
3
4
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1, minimum-scale=1"
/>

并且在我的 iOS13 系统中测试是完全没有问题的, 其实原因是 iOS12 禁用了 meta viewport, 如果使用双指拖动页面, 相信页面也是会放大的.

解决办法

禁止用户的双击行为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function handleDisableDoubleTapToScale(timestamp = 300) {
// 上一次触摸的时间
let lastTapTime = 0;

document.addEventListener('touchend', (e) => {
let currentTapTime = Date.now();

if(currentTapTime - lastTapTime <= 300) {
e.preventDefault();
}

lastTapTime = currentTapTime;
}, false);
}

但是这种方式会导致页面所有的双击事件都被禁用, 所以需要针对特定的 DOM 元素来做处理, 代码可以修改为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function handleDisableDoubleTapToScale(tagName = '', timestamp = 300) {
let lastTapTime = 0;

document.addEventListener('touchend', (e) => {
const $target = e.target;

// 只对特定的标签加以处理
if($target.tagName.toLowerCase() === tagName) {
let currentTapTime = Date.now();

if(currentTapTime - lastTapTime <= 300) {
e.preventDefault();
}

lastTapTime = currentTapTime;
}
}, false);
}