Force mobile Browser verkleinern mit Javascript

Question

In meiner Web App habe ich einige Thumbnails, die einen Leuchtkasten öffnen, wenn Sie darauf klicken. Auf Mobilgeräten sind die Miniaturansichten klein und der Benutzer zoomt normalerweise hinein. Das Problem besteht darin, dass sich die Lightbox außerhalb des sichtbaren Bereichs befindet, wenn sie darauf klicken. Sie müssen zur Lightbox scrollen, um das Video zu sehen. Ist es möglich, einen mobilen Browser zu verkleinern, damit er die ganze Seite sehen kann?

Die Seite reaktionsfähiger zu machen, ist momentan keine Option; es ist eine ziemlich große Web-Anwendung und es würde sehr viel Zeit brauchen, um zu refactorieren.

Answer 1

Durch viele andere Fragen gegraben, die versuchen, etwas herauszuzoomen, um die ganze Seite zu passen. Diese Frage war für meine Bedürfnisse am relevantesten, hatte aber keine Antworten. Ich fand this similar question, die eine Lösung hatte, obwohl anders implementiert, und nicht das, was ich brauchte.

Ich kam mit dieser, die zumindest in Android scheint zu arbeiten.

1. initial-scale=0.1: Zoomt wirklich weit. Sollte Ihre gesamte Website zeigen (und dann einige)
2. width=1200: Überschreibt anfängliche angelegte, setzt die Gerätebreite bis 1200.

Sie wollen werden 1200 ändern die Breite Ihrer Website. Wenn Ihre Website reaktiv ist, können Sie wahrscheinlich einfach initial-scale=1 verwenden. Aber wenn Ihre Website reaktionsschnell ist, brauchen Sie diese wahrscheinlich gar nicht erst.

Answer 2

Ich lief in einem ähnlichen 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, in das Benutzer wahrscheinlich hineinzoomen, 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 um, bis ich verstand, was passiert und dann den richtigen Code schreiben konnte.

Die Viewportdefinition in den Metadaten ist ein Live-Wert. Bei einer Änderung berücksichtigt das System den neuen Wert und korrigiert das Rendering entsprechend. die „wenn geändert“ durch die GUI erkannt wird jedoch und während des JavaScript-Code ausgeführt wird, der GUI-Thread wird meist blockiert ...

Mit dem im Verstand, bedeutete es, dass so etwas tun würde scheitern:

Also, da der einzige Weg, den ich gefunden habe, um die Skala zu beheben, es durch eine Änderung zu erzwingen, die ich nicht behalten will, 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 benutzte die setTimeout() Funktion:

viewport = jQuery("meta[name='viewport']"); 
original = viewport.attr("content"); 
force_scale = original + ", maximum-scale=1"; 
viewport.attr("content", force_scale); 
setTimeout(function() 
    { 
     viewport.attr("content", original); 
    }, 100); 

Here I 100ms schlafen, bevor das Ansichtsfenster zurück zum Zurücksetzen, was ich als normal. Auf diese Weise berücksichtigt das Ansichtsfenster den Parameter maximum-scale=1, dann wird das Zeitlimit überschritten und dieser Parameter entfernt. Die Skalierung wurde dabei wieder auf 1 zurückgesetzt, und die Wiederherstellung meines Originals (ohne Parameter maximum-scale) funktioniert wie erwartet (d. H. Ich kann die Schnittstelle erneut skalieren.)

WARNUNG 1: Wenn Sie einen maximum-scale Parameter in Ihrem ursprünglichen haben, möchten Sie wahrscheinlich es stattdessen ersetzen nur einen anderen Wert am Ende wie in meinem Beispielcode anhängt. (Dh force_scale = original.replace(/maximum-scale=[^,]+/, "maximum-scale=1") würde das ersetzen tun - aber das funktioniert nur, wenn es bereits eine maximum-scale, so dass Sie zunächst für beide Fälle überprüfen zu können, benötigen.)

WARNUNG 2: Ich habe versucht, mit 0 ms statt 100 ms und es scheitert. 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. Auch ich kenne einen Weg, zu wissen, dass die aktuellen Darstellungswerte wurden von der GUI gearbeitet ... (dh dies ein Hack ist, leider.)

Answer 3

Dies funktioniert für mich

let sw = window.innerWidth; 
let bw = $('body').width(); 
let ratio = sw/bw - 0.01; 
$('html').css('zoom', ratio); 
$('html').css('overflow-x', 'hidden'); 

Seine passt HTML auf Bildschirm und verhindert Scrollen. Aber das ist keine gute Idee und funktioniert nicht überall.

Answer 4

Ähnlich Radley Sustaire Lösung konnte ich unzoom zwingen, wenn das Gerät, das ich in Reaktion mit

zoomOutMobile =() => { 
    const viewport = document.querySelector('meta[name="viewport"]'); 

    if (viewport) { 
     viewport.content = 'initial-scale=1'; 
     viewport.content = 'width=device-width'; 
    } 
    } 

und in meinem machen

this.zoomOutMobile(); 

1 Rand Fall gefunden wurde dies nicht funktioniert hat gedreht auf dem mobilen Browser Firefox