Pinch-Zoom im mobilen Web deaktivieren

Ich möchte Pinch and Zoom auf Mobilgeräten deaktivieren.

Welche Konfiguration sollte ich dem Ansichtsfenster hinzufügen?

Verknüpfung : http://play.mink7.com/n/dawn/

BEARBEITEN: Da dies immer wieder kommentiert wird, wissen wir alle, dass wir das nicht tun sollten. Die Frage war wie mache ich es, nicht sollte Ich tue es.

Fügen Sie dies zu Ihrem für mobile Geräte hinzu. Dann machen Sie Ihre Breiten in Prozent und alles wird gut:

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

Fügen Sie dies für Geräte hinzu, die Viewport nicht verwenden können:

<meta name="HandheldFriendly" content="true" />

Dies verhindert jegliche Zoom-Aktion durch den Benutzer in iOS Safari und verhindert auch die Funktion „Zoom to tabs“:

document.addEventListener('gesturestart', function(e) {
    e.preventDefault();
    // special hack to prevent zoom-to-tabs gesture in safari
    document.body.style.zoom = 0.99;
});

document.addEventListener('gesturechange', function(e) {
    e.preventDefault();
    // special hack to prevent zoom-to-tabs gesture in safari
    document.body.style.zoom = 0.99;
});

document.addEventListener('gestureend', function(e) {
    e.preventDefault();
    // special hack to prevent zoom-to-tabs gesture in safari
    document.body.style.zoom = 0.99;
});

jsfiddle: https://jsfiddle.net/vo0aqj4y/11/

Das ist alles, was ich brauchte:

<meta name="viewport" content="user-scalable=no"/>

Allen, die sagen, dass dies eine schlechte Idee ist, möchte ich sagen, dass es nicht immer eine schlechte ist. Manchmal ist es sehr langweilig, herauszoomen zu müssen, um den gesamten Inhalt zu sehen. Wenn Sie beispielsweise eine Eingabe auf iOS eingeben, wird gezoomt, um sie in die Mitte des Bildschirms zu bringen. Sie müssen danach herauszoomen, da das Schließen der Tastatur nicht funktioniert. Ich stimme auch zu, dass Sie, wenn Sie viele Stunden in die Erstellung eines großartigen Layouts und einer großartigen Benutzererfahrung investieren, nicht möchten, dass es durch einen Zoom durcheinander gebracht wird.

Aber auch das andere Argument ist für Menschen mit Sehproblemen wertvoll. Wenn Sie jedoch Probleme mit Ihren Augen haben, verwenden Sie meiner Meinung nach bereits die Zoomfunktionen des Systems, sodass der Inhalt nicht gestört werden muss.

Leider funktioniert die angebotene Lösung nicht in Safari 10+, da Apple sich entschieden hat, sie zu ignorieren user-scalable=no. Dieser Thread enthält weitere Details und einige JS-Hacks: Viewport-Zoom deaktivieren iOS 10+ Safari?

Ich denke, wonach Sie suchen, ist die CSS-Eigenschaft Touch-Aktion. Sie brauchen nur eine CSS-Regel wie diese:

html, body {touch-action: none;}

Sie werden sehen, dass es eine ziemlich gute Unterstützung hat (https://caniuse.com/#feat=mdn-css_properties_touch-action_none), einschließlich Safari, sowie zurück zu IE10.

Gefunden hier Sie können verwenden user-scalable=no:

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