在开发移动网页的时候，各大浏览器为了给视力不好的人群看清网页的内容，强制设定了一条无障碍规则：

当网页上的文字小于16px的时候，强制对点击处进行放大。

并且近几年这个规则的优先级越来越高，在网页顶部写meta信息已经不管用了。

虽然初衷是好的，但有时候不太重要的信息，或者字体图标小了，也会导致点击时网页就胡乱放大，尤其是WebAPP很出戏。

以下是可能有用的措施，防止用户在点击你的网页时不断zoom：

头部meta

虽然基本可以断定在较新的iOS上，这样做无效，但是考虑较早版本的iOS或是安卓阵营，这条还是建议加上：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

加在所有html头部即可。

CSS阻止

同样，CSS上的设置在新的iOS上也没有效果，但适用于早期iOS和安卓等其他操作系统的浏览器。

body {
    touch-action: manipulation;
}

如果你只想控制某几个元素不被点击放大，把body改成目标元素的选择器即可。

JavaScript阻止

这是目前唯一在新版iOS Safari上还有效的方法：

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

    if (now - lastTouchEnd <= 300) {
        e.preventDefault();
    }

    lastTouchEnd = now;
}, { passive: false });

它只能阻止双击放大，对小于300毫秒的双击，丢掉后一次点击，以至于Safari没有把这次操作当成双击。

改你的字号

当你的网页在Safari上经常被放大，其实是在提醒你，字体小了，容易看不清，尝试修改你的css，把小于16px的字设置为至少16px，一切就会好起来。

#iOS #safari #zoom #无障碍设计