Deaktivieren Sie den Pinch-Zoom im mobilen Web

76

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/

Harsha MV
quelle
11
Ich hoffe, Sie erstellen keine Website für eine in Großbritannien ansässige Organisation. Wenn Sie dies tun, würde das Deaktivieren des Pinch-to-Zoom (effektiv eine Barrierefreiheitsfunktion) gegen mehrere Gesetze verstoßen, um Menschen mit Sehbehinderungen aktiv zu diskriminieren ... Es gibt nie einen guten Grund, diese Funktionalität zu deaktivieren ... Immer!
Mike Insch
17
Nicht immer eine schlechte Idee. Wenn Sie eine App wie eine Webseite erstellen, würde ich das tun. Sie können den App Store nicht immer verwenden, daher ist dies die nächstbeste Sache.
Shumii
11
Bitte hör auf damit. Sehbehinderte können Websites nicht anzeigen, ohne sie zu vergrößern, und dies macht unser Leben viel schwieriger.
Jack Marchetti
32
Können Sie sich vorstellen, eine App im "Google Maps" -Stil zu erstellen, und wenn Sie zum ersten Mal zum Vergrößern kneifen, wird die TEXT ENTRY BOX nicht mehr angezeigt? Oder die COPYRIGHT-SYMBOLE? Manchmal möchten Sie nicht, dass die GESAMTE APP zoomt. Manchmal möchten Sie nur, dass PART OF IT zoomt.
Ayelis
7
Wenn Sie eine reaktionsschnelle einseitige Webanwendung entwerfen, stört der Pinch-Zoom (auch automatischer Zoom) den Workflow erheblich, da der Browser automatisch zoomt, wenn Sie versehentlich auf eine leere Stelle doppelklicken.
Tower Jimmy

Antworten:

165

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" />
SpaceBeers
quelle
27
Ich habe das hinzugefügt. aber trotzdem kann ich kneifen und zoomen.
Harsha MV
Danke, ich hatte einen Standardportwert. so wurde es überfahren
Harsha MV
1
Was ist der Unterschied zwischen diesem und stackoverflow.com/a/4472910/198348 ?
Ehtesh Choudhury
3
@ Shurane Das sind verschiedene Fragen?
SpaceBeers
8
2019: PWAs sind jetzt eine Sache und dies ist eine Lösung, um zu verhindern, dass PWAs seltsame Verhaltensweisen auf Mobilgeräten haben :)
Jessy
12

Das ist alles was ich brauchte:

<meta name="viewport" content="user-scalable=no"/>
sehr schön
quelle
11

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.

Thibaut Rey
quelle
3
Sie sollten dies als Kommentar machen.
Awesomeness01
2
Entschuldigung, mein damaliges Level erlaubte mir nicht, Kommentare zu posten, sondern nur neue Nachrichten. Deshalb.
Thibaut Rey
2
Durch Festlegen der Schriftgröße für Formularelemente auf 16 Pixel wird ein Zoomen auf iOS-Geräten verhindert.
Hallojebus
Ich kann sagen, dass Sie nicht in Ihren 50ern sind. Für viele von uns ist es nicht so, dass wir Sehprobleme haben, die so schwerwiegend sind, dass wir spezielle Unterkünfte (sogar Lesebrillen) verwenden müssen, AUSSER bei der Verwendung von Webseiten auf unseren iPads, die Designer für perfekt mit ihren winzigen Schriftarten halten. Solche Seiten sagen mir: "Es ist mir egal, ob du das lesen kannst oder nicht, alter Mann."
narr4jesus
2
Ich bin ein älterer Mann mit Sehproblemen, und trotzdem verstehe ich, warum es manchmal gebraucht wird. "Websites" sind nicht immer für die breite Öffentlichkeit oder für jedes einzelne Mitglied der Gesellschaft gedacht, genauso wie es verrückt wäre, jeden Bürger zu zwingen, Rollstuhlrampen und Unisex-Toilettenblöcke in seinen Häusern zu installieren, denn "das ist das Gesetz, das Sie kennen ". Sicher, wenn Sie öffentlichen Zugang gewähren oder Mitarbeiter beschäftigen, spielen diese Überlegungen in der Architektur eine Rolle. Es gibt zum Beispiel einseitige Web-App-Spiele, die ruiniert würden, wenn die Leute hinein- und herauszoomen könnten.
unsynchronisiert
11

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/

Trias
quelle
Dies funktionierte auf macOS safari und document.body.style.zoom = 0.99; war nicht einmal notwendig.
Kevin Baragona
3

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

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

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.

Herr Unglaublich
quelle
Dadurch wird auch das Scrollen deaktiviert
simonwjackson
0

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.

Ajay Sharma
quelle
0

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');
  }
Pascal Casadei Van Raamsdonk
quelle