Wie Sie zoom in / out-je nach browser-Höhe, mit CSS zoom Eigenschaft?

Ich habe eine website mit einem großen Platz (gleiche Höhe wie Breite).

Möchte ich den Platz, um immer über 95% der browser-Fenster-Höhe als die Höhe. Aber ich will nicht wirklich ändern Sie die Festlegung der Höhe/Breite des Platzes. Ich möchte die CSS - zoom Eigenschaft. Wenn ich ändern Sie die browser-Fenster auf eine kleine Größe, sollte es verkleinern, so dass der Platz ist immer noch voll sichtbar ist.

  • Hinweis: zoom ist nicht-validieren von CSS nicht unterstützt werden Firefox und Opera. Für eine cross-browser-zoom-Lösung finden Sie unter CSS zoom Eigenschaft und komplette styles für cross-browser CSS-zoom.
  • Nach dem nachdenken über die Frage mehr, merkte ich, dass ich haben kann, beantwortet die Frage falsch. Die erste demo, die ich gemacht zoomt der Platz, nicht die gesamte Seite. Wenn Sie brauchen, um zu Zoomen der gesamten Seite finden Sie die zweite demo Hinzugefügt, um die Antwort unten. Um klar zu sein, welche brauchen Sie, um zu vergrößern, die gesamte Seite oder nur den Platz?
InformationsquelleAutor phpheini | 2013-03-15
  1. 7

    Hier ist ein Startpunkt (mit cross-browser-Unterstützung Hinzugefügt, für Firefox und Opera): JSFiddle Demo

    HTML

    <div class="square"></div>

    CSS

    html, body {
    margin: 0;
    height: 100%;
}
.square {
    width: 300px;
    height: 300px;
    margin: 0 auto;
    background-color: #7ad;
    -moz-transform-origin: center top;
      -o-transform-origin: center top;
}

    jQuery

    function zoomSquare() {
    var $square = $('.square');

    var viewportHeight = $(window).height();
    var squareHeight = $square.height();
    var desiredHeight = Math.round(viewportHeight * 0.95);
    var zoom = (desiredHeight / squareHeight);

    $square.css('zoom', zoom);
    $square.css('-moz-transform', 'scale(' + zoom + ')');
    $square.css(  '-o-transform', 'scale(' + zoom + ')');
}

//When the browser is resized
$(window).on('resize', function(){ zoomSquare(); });

//When the page first loads
$(document).ready(function(){
    zoomSquare();
});

    Update:

    Den obigen code verkleinert das Quadrat-element, anstatt die gesamte Seite. Wenn die gesamte Seite muss gezoomt werden (was der Fall sein kann, wenn es andere Inhalte auf der Seite außerhalb des Platzes), versuchen Sie, diese zweite JSFiddle Demo.

    Beim Zoomen der gesamten Seite, fand ich, dass das Zoomen in führt dazu, dass horizontale Bildlaufleisten angezeigt werden, die in allen Browsern, das ist sehr schlecht für die usability. Um dies zu vermeiden, zoom-out auf kleine browser-Fenster, aber nicht zoom-in auf großen. Dies ist, wie die zweite Demo verhält (es wird sich nur vergrößern, wenn der browser ist sehr klein).

    InformationsquelleAutor Matt Coughlin
Schreibe einen Kommentar