Deaktivieren Sie den Pinch-Zoom im mobilen Web

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

Welche Konfiguration sollte ich dem Ansichtsfenster hinzufügen?

Link: http://play.mink7.com/n/dawn/

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

Fügen Sie dies Ihrem für mobile Geräte hinzu. Dann machen Sie Ihre Breiten in Prozent und Sie werden in Ordnung sein:

<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 das Ansichtsfenster nicht verwenden können:

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

Das ist alles was ich brauchte:

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

Allen, die gesagt haben, 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 unter iOS eingeben, wird sie 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.

Das andere Argument ist aber auch 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 Sie den Inhalt nicht stören müssen.

Dies verhindert jegliche Zoomaktion des Benutzers in ios safari und verhindert auch die Funktion "Auf Registerkarten zoomen":

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/

Leider funktioniert die angebotene Lösung in Safari 10+ nicht, da Apple beschlossen hat, sie zu ignorieren user-scalable=no. Dieser Thread enthält weitere Details und einige JS-Hacks: Deaktivieren der Ansichtsfenster-Zoom-Safari für iOS 10+?

IE hat seinen eigenen Weg: Eine CSS-Eigenschaft, -ms-content-zooming. Wenn Sie es auf "Keine" am Körper oder auf etwas setzen, sollte es deaktiviert werden.

Deaktivieren Sie die Prise, um IE10 zu vergrößern

http://msdn.microsoft.com/en-us/library/ie/hh771891(v=vs.85).aspx

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

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

Ich denke, was Sie suchen, ist die CSS-Eigenschaft Touch-Action . Sie benötigen lediglich eine CSS-Regel wie die folgende:

html, body {touch-action: none;}

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

Versuchen Sie es mit der Eigenschaft min-width. Lass mich dir erklären. Angenommen, ein Gerät mit einer Bildschirmbreite von 400 Pixel (für eine Instanz). Wenn Sie hineinzoomen, werden die Schriftarten immer größer. Boxen und Divs bleiben jedoch gleich breit. Wenn Sie die Mindestbreite verwenden, können Sie vermeiden, dass Div und Box verkleinert werden.

Ich bin mir nicht sicher, ob dies helfen könnte, aber ich habe das Pinch / Zoom-Problem (ich wollte vermeiden, dass Benutzer meine Webanwendung zoomen) mit dem Winkelhammer-Modul gelöst:

In meiner app.component.html habe ich hinzugefügt:

<div id="app" (pinchin)="pinchin();">

und in meiner app.component.ts:

  pinchin() {
      //console.log('pinch in');
  }