Erzwinge das Verkleinern des mobilen Browsers mit Javascript

Ich habe viele andere Fragen geklärt, um etwas herauszuzoomen, das auf die gesamte Seite passt. Diese Frage war für meine Bedürfnisse am relevantesten, hatte aber keine Antworten. Ich fand diese ähnliche Frage , die eine Lösung hatte, obwohl anders implementiert, und nicht das, was ich brauchte.

Ich habe das erfunden, was zumindest in Android funktioniert.

1. initial-scale=0.1 : Zoomt sehr weit. Sollte Ihre ganze Website (und dann einige) zeigen
2. width=1200 : Überschreibt die Anfangsskala, legt die Gerätebreite auf 1200 fest.

Sie sollten 1200 ändern, um die Breite Ihrer Website zu sein. Wenn Ihre Website reaktionsfähig ist, können Sie wahrscheinlich einfach initial-scale=1 verwenden. Aber wenn Ihre Website reaktionsschnell ist, brauchen Sie diese wahrscheinlich gar nicht.

Ich lief in ein ähnliches Problem, eher das Gegenteil, denke ich, aber die Lösung ist sicherlich die gleiche. In meinem Fall habe ich ein Thumbnail, auf das Leute klicken, das ein "Popup" öffnet, wo Benutzer wahrscheinlich heranzoomen, um besser zu sehen, und wenn ich einmal fertig bin, möchte ich auf die normale Seite mit einer Skala von 1.0 zurückkehren.

Um das zu tun, schaute ich mich ziemlich lange um, bis ich verstand, was passiert und dann den richtigen Code schreiben konnte.

Die Viewport-Definition in den Metadaten ist ein Live-Wert. Bei einer Änderung berücksichtigt das System den neuen Wert und korrigiert das Rendering entsprechend. Das "wenn geändert" wird jedoch von der GUI erkannt und während der JavaScript-Code ausgeführt wird, ist der GUI-Thread größtenteils blockiert ...

Vor diesem Hintergrund würde es bedeuten, dass etwas nicht funktioniert:

Also, da die einzige Möglichkeit, die Waage zu reparieren, darin besteht, sie durch eine Änderung zu erzwingen, die ich nicht behalten möchte, muss ich auf das Original zurücksetzen. Aber die intermediären Veränderungen werden nicht betrachtet und handeln (großartige Optimierung!). Wie lösen wir dieses Problem? Ich habe die Funktion setTimeout() verwendet:

Hier schlafe ich 100ms, bevor ich das Ansichtsfenster wieder auf das zurückstelle, was ich für normal halte. Auf diese Weise berücksichtigt das Ansichtsfenster den Parameter maximum-scale=1 , dann wird das Zeitlimit überschritten und der Parameter entfernt. Die Skalierung wurde dabei wieder auf 1 zurückgesetzt, und die Wiederherstellung meines Originals (das keinen maximum-scale -Parameter enthält) funktioniert wie erwartet (d. H. Ich kann die Schnittstelle erneut skalieren.)

WARNUNG 1: Wenn Sie in Ihrem Original einen maximum-scale -Parameter haben, möchten Sie ihn wahrscheinlich ersetzen, anstatt nur am Ende einen anderen Wert anzuhängen, wie in meinem Beispielcode. (d. h. force_scale = original.replace(/maximum-scale=[^,]+/, "maximum-scale=1") würde die Ersetzung durchführen - aber das funktioniert nur, wenn bereits ein maximum-scale vorhanden ist. Sie müssen also zuerst prüfen, ob beide Fälle zutreffen.)

WARNUNG 2: Ich habe es mit 0ms anstatt mit 100ms versucht und es schlägt fehl. Dies kann von Browser zu Browser unterschiedlich sein, aber die Mozilla-Familie führt den sofort abgelaufenen Timer-Code nacheinander aus, was bedeutet, dass der GUI-Prozess nie eine Chance hat, die Waage auf 1 zurückzusetzen, bevor die Funktion zum Zurücksetzen des Viewports ausgeführt wird. Ich weiß auch von einer Möglichkeit zu wissen, dass die aktuellen Ansichtsfensterwerte von der GUI bearbeitet wurden ... (d. H. Dies ist leider ein Hack.)

Dieser funktioniert für mich

Es passt html zum Bildschirm und verhindert Scrollen. Aber das ist keine gute Idee und funktioniert nicht überall.

Ähnlich wie Radley Sustaires Lösung gelang es mir, Unzoom zu erzwingen, wenn das Gerät eingeschaltet wurde. Reagieren mit

und in meinem Render

1 Randfall, den ich gefunden habe, war das mit dem Firefox mobilen Browser nicht funktionierte