Kann ich das Meta-Tag des Ansichtsfensters in einer mobilen Safari im laufenden Betrieb ändern?

Ich habe eine AJAX-App für den mobilen Safari-Browser, die verschiedene Arten von Inhalten anzeigen muss.

Für einige Inhalte brauche ich user-scalable=1und für andere brauche ich user-scalable=0.

Gibt es eine Möglichkeit, den Wert des Inhaltsattributs zu ändern, ohne die Seite zu aktualisieren?

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

javascript mobile-safari viewport Pfeffer
quelle

Antworten:

148

Mir ist klar, dass dies ein bisschen alt ist, aber ja, es kann getan werden. Einige Javascript, um Ihnen den Einstieg zu erleichtern:

viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');

Ändern Sie einfach die Teile, die Sie benötigen, und Mobile Safari übernimmt die neuen Einstellungen.

Aktualisieren:

Wenn Sie das Meta-Ansichtsfenster-Tag noch nicht in der Quelle haben, können Sie es direkt an Folgendes anhängen:

var metaTag=document.createElement('meta');
metaTag.name = "viewport"
metaTag.content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
document.getElementsByTagName('head')[0].appendChild(metaTag);

Oder wenn Sie jQuery verwenden:

$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">');

Markquezada
quelle

Nett! Leider kann ich es nicht zum Laufen bringen. Meine Situation ist etwas anders: Ich arbeite mit einer Site mit einer Breite von 980 Pixel. Der Inhalt reicht bis an den Rand des Designs, sodass er auf einem iPad unangenehm aussieht. Ich dachte, ich würde das Ansichtsfenster auf eine Breite von 1020 Pixel einstellen, um einen Rand von 20 Pixel auf beiden Seiten zu ermöglichen ... aber kein Glück: viewport = document.querySelector("meta[name=viewport]"); viewport.setAttribute('content', 'width=1020'); (Nur für einen bestimmten Kontext: Ich stelle dies in eine etwas gesperrte Drupal-Instanz ... Ich habe also keinen direkten Zugang zum Kopfbereich und muss Javascript verwenden.)

Sam

Das sollte einfach genug sein. Schreiben Sie es einfach direkt ein. Wenn Sie jQuery verwenden, wäre es

$('head').append('<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">');

document.getElementsByTagName('head')[0].appendChild( ... );

ungefähr

Bei den Inhaltsattributen gibt der Webinspektor von Mobile Safari einen Fehler in den Semikolons aus. Dies scheint gültiger zu sein:viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');

jfroom

@the_nuts Sie haben Recht, appendChild erwartet einen Knoten, keine Zeichenfolge. Aktualisiert. Vielen Dank.

Markquezada

@basZero: Sie können den Benutzeragenten verwenden, um zu überprüfen, auf welchem Gerät das Skript ausgeführt wird, bevor Sie den obigen Code ausführen, aber im Allgemeinen halte ich das für eine schlechte Idee. Versuchen Sie, anhand der Gerätefunktionen (oder der Bildschirmgröße, falls erforderlich) und nicht anhand der tatsächlichen Geräte zu verallgemeinern. Sie können beispielsweise feststellen, ob das Gerät Berührungsereignisse usw. unterstützt (z. B. mit modernizr ). Kommt darauf an, was du versuchst zu tun.

Markquezada

in deinem <head>

<meta id="viewport"
      name="viewport"
      content="width=1024, height=768, initial-scale=0, minimum-scale=0.25" />

irgendwo in deinem Javascript

document.getElementById("viewport").setAttribute("content",
      "initial-scale=0.5; maximum-scale=1.0; user-scalable=0;");

... aber viel Glück beim Optimieren für Ihr Gerät, stundenlanges Fummeln ... und ich bin immer noch nicht da!

Quelle

sonjz
quelle

Dies wurde größtenteils beantwortet, aber ich werde erweitern ...

Schritt 1

Mein Ziel war es, den Zoom zu bestimmten Zeiten zu aktivieren und zu anderen Zeiten zu deaktivieren.

// enable pinch zoom
var $viewport = $('head meta[name="viewport"]');    
$viewport.attr('content', 'width=device-width, initial-scale=1, maximum-scale=4');

// ...later...

// disable pinch zoom
$viewport.attr('content', 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no');

Schritt 2

Das Ansichtsfenster-Tag wurde aktualisiert, aber der Pinch-Zoom war noch aktiv !! Ich musste einen Weg finden, um die Seite dazu zu bringen, die Änderungen zu übernehmen ...

Es ist eine Hack-Lösung, aber das Umschalten der Opazität des Körpers hat den Trick getan. Ich bin mir sicher, dass es andere Möglichkeiten gibt, dies zu erreichen, aber hier ist, was für mich funktioniert hat.

// after updating viewport tag, force the page to pick up changes           
document.body.style.opacity = .9999;
setTimeout(function(){
    document.body.style.opacity = 1;
}, 1);

Schritt 3

Mein Problem war zu diesem Zeitpunkt größtenteils gelöst, aber nicht ganz. Ich musste die aktuelle Zoomstufe der Seite kennen, damit ich einige Elemente an die Seite anpassen konnte (denken Sie an Kartenmarkierungen).

// check zoom level during user interaction, or on animation frame
var currentZoom = $document.width() / window.innerWidth;

Ich hoffe das hilft jemandem. Ich habe mehrere Stunden damit verbracht, meine Maus zu schlagen, bevor ich eine Lösung gefunden habe.

Posit Labs
quelle

Dies hat mir das Leben gerettet, aber ich habe ein kleines Problem damit: Angenommen, Sie zeigen ein Bild in einem Overlay-Div mit 100% an und zoomen es auf einem mobilen Gerät hinein. Sie zoomen mit der nativen Browser-Zoom-Implementierung, die normalerweise nur das Sichtbare skaliert Bereich ohne erneutes Rendern der Originaldatei. Wenn ich andererseits "width = device-width" für den deaktivierten Zoomstatus entferne, wird das Bild beim Zoomen in Ordnung gebracht, aber ich verliere meine letzte Seitenposition, wenn die 100% -Div geschlossen wird ...

Stefan Müller