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;" />Antworten:
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">');$('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( ... );
viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');
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!
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.
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.)