it-swarm.com.de

Wie deaktiviere ich das Zoomen von Ansichtsfenstern in Mobile Safari?

Ich habe alle drei ohne Erfolg versucht:

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” />

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=false;” />

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

es handelt sich jeweils um unterschiedliche Werte, die ich bei der Google-Suche oder bei der Suche nach SO empfohlen habe, aber keiner der Werte für 'user-scalable = X' scheint zu funktionieren

Ich habe auch versucht, die Werte durch Kommas zu trennen, anstatt durch Semikolon. Dann habe ich NUR versucht, den benutzerskalierbaren Wert zu haben, immer noch kein Glück.

UPDATE

Habe dies von Apples Seite bekommen und es funktioniert:

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

es stellte sich heraus, dass das Problem die nicht standardmäßigen Anführungszeichen waren, da ich das Meta-Tag von einer Website kopiert hatte, auf der sie verwendet wurden, whoops

350
MetaGuru

In Ihrem Code werden doppelte Anführungszeichen für Attribute als ausgefallene doppelte Anführungszeichen angezeigt. Wenn die ausgefallenen Anführungszeichen in Ihrem tatsächlichen Quellcode vorhanden sind, würde ich vermuten, dass das das Problem ist.

Dies funktioniert für mich auf Mobile Safari in iOS 4.2.

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

Für Benutzer, die nach einer iOS 10-Lösung suchen, ist user-scaleable=no in Safari für iOS 10 deaktiviert. Der Grund dafür ist, dass Apple versucht, die Barrierefreiheit zu verbessern, indem die Benutzer Webseiten zoomen können.

Aus Versionshinweisen:

Um den Zugriff auf Websites in Safari zu verbessern, können Benutzer jetzt auch dann auf Zoomen klicken, wenn für eine Website im Ansichtsfenster die Option "Vom Benutzer skalierbar" = "Nein" festgelegt ist.

Soweit ich weiß, haben wir Pech.

144
Mattis

@mattis ist richtig, dass iOS 10 Safari nicht zulässt, dass Sie die Pinch-Funktion zum Zoomen mit dem benutzerskalierbaren Attribut deaktivieren. Ich habe jedoch die Deaktivierung mithilfe von preventDefault für das Ereignis 'gesturestart' veranlasst. Ich habe dies nur auf Safari in iOS 10.0.2 überprüft.

document.addEventListener('gesturestart', function (e) {
    e.preventDefault();
});
93
jeremypress

für iphones safari bis iOS 10 ist "viewport" keine lösung, ich mag diesen weg nicht, aber ich habe diesen javascript code benutzt und es hat mir geholfen

 document.addEventListener('touchmove', function(event) {
    event = event.originalEvent || event;
    if(event.scale > 1) {
      event.preventDefault();
    }
  }, false);
15
Arthur
user-scalable=0

Dies funktioniert unter iOS 10 nicht mehr. Apple hat die Funktion entfernt.

Es gibt keine Möglichkeit, die Zoom-Website unter iOS zu deaktivieren, es sei denn, Sie erstellen eine Bruttoplattform-App.

9
angry kiwi

Fügen Sie Ihrem Head-Tag Folgendes hinzu:

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

zusätzlich

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

Fügen Sie abschließend entweder als Stilattribut oder in Ihre CSS-Datei den folgenden Text für Webkit-basierte Browser ein:

html {
    -webkit-text-size-adjust: none
}
9
Lorenz Lo Sauer

Dies funktioniert gut in IOS 10.3.2

    document.addEventListener('touchmove', function(event) {
        event = event.originalEvent || event;
        if (event.scale !== 1) {
           event.preventDefault();
        }
    }, false);

danke @arthur und @aleclarson

5
Nikhil Gowda

manchmal können diese anderen Direktiven in Inhalten Ihre Ansicht durcheinander bringen, wenn Apple das Layout Ihrer Seite errät. Zum Deaktivieren des Pinch-Zooms müssen Sie lediglich

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

In Safari 9.0 und höher können Sie im Viewport-Meta-Tag auf Größe verkleinern verwenden, wie unten gezeigt

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
4
ursuleacv

Es ist mir gelungen, dieses Verhalten zu beenden, indem ich dem HTML-Header Folgendes hinzugefügt habe. Dies funktioniert auf mobilen Geräten, da Desktop-Browser das Zoomen mit dem Mausrad unterstützen. Bei Desktop-Browsern ist das keine große Sache, aber es ist wichtig, dies zu berücksichtigen.

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

und die folgende Regel zum CSS Stylesheet

html {
        -webkit-text-size-adjust: none;
        touch-action: manipulation;
}
2
imelgrat

Ich habe es in iOS 12 mit dem folgenden Code funktioniert:

if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
  window.document.addEventListener('touchmove', e => {
    if(e.scale !== 1) {
      e.preventDefault();
    }
  }, {passive: false});
}

Mit der ersten if-Anweisung stelle ich sicher, dass sie nur in iOS-Umgebungen ausgeführt wird (wenn sie in Android ausgeführt wird, wird das Bildlaufverhalten unterbrochen). Beachten Sie auch, dass die Option passive auf false eingestellt ist.

Ich hatte dummerweise ein Wrapper Div, dessen Breite in Pixeln gemessen wurde. Die anderen Browser schienen intelligent genug zu sein, um damit umzugehen. Nachdem ich die Breite in einen Prozentwert umgewandelt hatte, funktionierte dies auch auf Safari Mobile. Sehr nervig.

.page{width: 960px;}

zu

.page{width:93.75%}

<div id="divPage" class="page">
</div>
0
Welshboy

Um die Barrierefreiheitsanforderungen der WAI WCAG 2.0 AA zu erfüllen, müssen Sie niemals den Pinch Zoom deaktivieren. (WCAG 2.0: SC 1.4.4 Größe der Textebene AA ändern). Sie können hier mehr darüber lesen: Mobile Accessibility: Wie WCAG 2.0 und andere W3C/WAI-Richtlinien für Mobilgeräte gelten, 2.2 Zoom/Vergrößerung

0
haltersweb