user-scalable=no was ignored with Safari? Oh no

Caused

Safari 10 or later, the documentation describe:

Accessibility
Pinch-to-zoom is always enabled for all users. The viewport setting for user-scalable is ignored.

When you double tap or click screen it will zoomin or zoomout, but some situations, we don’t want to do this.
So, how to solve it?

Solution

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

Basicly, you still set the meta.

Next, you should disable all touch:

window.onload = () => {
document.addEventListener(
"touchstart",
event => {
if (event.touches.length > 1) {
event.preventDefault();
}
},
{ passive: false }
);

let lastTouchEnd = 0;
document.addEventListener(
"touchend",
event => {
const now = new Date().getTime();
if (now - lastTouchEnd <= 300) {
event.preventDefault();
}
lastTouchEnd = now;
},
false
);
};

Finally, you need disabled all touch action with css

html,
body {
touch-action: manipulation;
}

“user-scalable=no”屬性被 iOS Safari ignore 的解決方法