Kraft mobile browser Zoomen mit Javascript

In meiner web-app, ich habe einige Vorschaubilder öffnet eine lightbox, wenn geklickt wird. Auf mobile, die thumbnails sind kleine und der Nutzer in der Regel vergrößert. Das problem ist, dass, wenn Sie klicken, um es zu spielen, die lightbox ist außerhalb des sichtbaren Bereichs (Sie müssen scrollen, um die lightbox zu sehen, das video). Ist es möglich, zu zwingen, einen mobilen browser zu verkleinern damit Sie sehen können, die ganze Seite?

Dass die Seite mehr reagieren ist keine option jetzt; es ist eine ziemlich große web-Anwendung, und es würde eine riesige Menge Zeit überarbeiten.

  • vielleicht kann das dir helfen? stackoverflow.com/questions/17440196/...
  • Ich sah, dass die post früher, und ich don ' T denke, es wird mir helfen. Ich beziehe mich auf die pinch-zoom mit einem mobilen Gerät tun können, nicht Zoomen mit CSS. Als alternative zu dieser, gibt es eine Möglichkeit zu erkennen, die zoom-Stufe des Browsers? AFAIK tools wie detect-zoom gebrochen sind mit neueren Versionen der Browser.
InformationsquelleAutor Andrew Hassan | 2014-03-25
  1. 6

    Zitze durch eine Menge anderer Fragen, versuchen, etwas zu vergrößern, um fit für die gesamte Seite. Diese Frage war die relevantesten für meine Bedürfnisse, aber hatte keine Antworten. Ich fand eine ähnliche Frage, die hatten eine Lösung, obwohl anders implementiert, und nicht das, was ich brauchte.

    Ich kam mit dieser, das scheint zu funktionieren, bei Android zumindest.

    1. initial-scale=0.1: Zoomt sehr weit. Zeigen sollte, Ihre gesamte website (und dann einige)
    2. width=1200: Überschreibt initial-scale ist, setzt das Gerät-Breite 1200.

    Die Sie ändern wollen 1200 werden die Breite Ihrer Website. Wenn Ihre Website responsive ist, dann können Sie wahrscheinlich nur initial-scale=1. Aber wenn Ihre Website responsive ist, werden Sie wahrscheinlich nicht brauchen, es in den ersten Platz.

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

  if ( viewport ) {
    viewport.content = "initial-scale=0.1";
    viewport.content = "width=1200";
  }
}

zoomOutMobile();
    • Dies funktionierte gut, um die Größe des Viewports auf android und windows phones für mich. Danke!
    • Nettes script ! Vielen Dank, funktioniert auf allen Geräten (Android, iPhone, iPad, Windows Phone) !! (Vergessen Sie nicht, setzen es an das Ende des html)
    InformationsquelleAutor Radley Sustaire
  2. 2

    Ich lief in ein ähnliches problem, eher das Gegenteil, denke ich, aber die Lösung ist sicherlich das gleiche. In meinem Fall habe ich eine Miniatur, die Leute klicken, öffnet sich ein "popup" wo die Nutzer sind wahrscheinlich zu Zoomen, um besser zu sehen, und einmal getan, ich will zurück auf die ganz normale Seite mit einer Skala von 1.0.

    Zu tun, dass ich sah, um ganz ein bisschen, bis ich verstanden habe, was passiert und könnte dann den korrekten code schreiben.

    Viewport-definition in den meta-Daten ist ein Leben Wert. Wenn geändert, das system übernimmt den neuen Wert in die Betrachtung und Korrektur des rendering entsprechend. Aber, das "bei änderung" erkannt wird von der GUI und während der JavaScript-code ausgeführt wird, der GUI-thread ist weitgehend blockiert...

    Mit dem im Verstand, es bedeutete, dass etwas wie das zu tun wäre ein Fehler auf:

    viewport = jQuery("meta[name='viewport']");
original = viewport.attr("content");
force_scale = original + ", maximum-scale=1";
viewport.attr("content", force_scale); //IGNORED!
viewport.attr("content", original);

    So, da der einzige Weg, fand ich zum fixieren der Waage ist die Kraft, die es durch eine änderung, die ich nicht behalten wollen, muss ich wieder auf das original. Aber die Vermittler änderungen werden nicht angezeigt und wirken sich auf (groß-Optimierung!) so, wie lösen wir das 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);

    Hier schlafe ich 100ms vor dem zurücksetzen des Viewports zurück zu dem, was ich als normal erachten. So wird der viewport nimmt die maximum-scale=1 parameter in der Rechnung, dann ist es mal aus und entfernt den parameter. Die Skala wurde geändert, zurück zu 1 in der Prozess und wiederherstellen von meine ursprüngliche (nicht durch eine maximum-scale parameter) funktioniert wie erwartet (d.h. ich kann die Skalierung des interface wieder.)

    WARNUNG 1: Wenn Sie eine maximum-scale parameter in Ihrer ursprünglichen, werden Sie wahrscheinlich wollen, um es zu ersetzen, anstatt nur anfügen eines weiteren Wert am Ende wie in meinem Beispiel-code. (d.h. force_scale = original.replace(/maximum-scale=[^,]+/, "maximum-scale=1") tun würde, den zu ersetzen-aber das funktioniert nur, wenn es bereits eine maximum-scale, so müssen Sie zunächst überprüfen, um zu erlauben, für jedem Fall.)

    WARNUNG 2: ich habe versucht, mit 0ms statt 100ms und es scheitert. Das kann sich von browser zu browser, aber der Mozilla-Familie läuft der sofort-Timeout-timer-code, die zurück zu Rückseite, was bedeutet, dass der GUI-Prozess würde nie die chance bekommen, setzen den Maßstab wieder auf 1 vor der Ausführung der Funktion zum zurücksetzen des Viewports. Auch ich mache einen Weg kennen um zu wissen, dass die aktuelle viewport-Werte wurden bearbeitet, die von der GUI... (also das ist ein hack, leider.)

    InformationsquelleAutor Alexis Wilke
  3. 1

    Ähnlich Radley Sustaire die Lösung, die ich geschafft zu zwingen, unzoom, wenn das Gerät gedreht wird Reagieren mit

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

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

    in meinem render

    this.zoomOutMobile();

    1 edge-Fall, die ich fand, war dieser hat nicht funktioniert, die Firefox mobilen browser

    InformationsquelleAutor Davey
  4. 0

    Dieser arbeitet 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 html-passt zu Bildschirm und verhindert das scrollen. Aber dies ist nicht eine gute Idee, und funktioniert nicht überall.

    InformationsquelleAutor ikebastuz
  5. 0
    var zoomreset = function() {
    var viewport = document.querySelector("meta[name='viewport']");
    viewport.content = "width=650, maximum-scale=0.635";
    setTimeout(function() {
        viewport.content = "width=650, maximum-scale=1";
    }, 350);
}
setTimeout(zoomreset, 150);

    ersetzen 650 mit der Breite Ihrer Seite

    InformationsquelleAutor Gaby_64
Schreibe einen Kommentar