如何使用CSS zoom属性根据浏览器高度放大/缩小？ [关闭]

Question

我有一个包含大正方形（高度与宽度相同）的网站。

我希望正方形始终将浏览器窗口高度的95％作为其高度。 但是我实际上不想更改定义的正方形的高度/宽度。 我想使用CSS zoom属性。 如果我将浏览器窗口更改为较小的尺寸，则应将其缩小以使正方形仍然完全可见。

Answer 1

这是一个起点（为Firefox和Opera添加了跨浏览器支持）： JSFiddle演示

的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();
});

更新：

上面的代码缩放正方形元素，而不是整个页面。 如果需要缩放整个页面（在正方形之外页面上还有其他内容，可能就是这种情况），请尝试第二个JSFiddle Demo 。

放大整个页面时，我发现放大会导致水平滚动条出现在所有浏览器中，这对可用性非常不利。 为避免这种情况，请缩小浏览器的小窗口，但不要放大大的浏览器。 这就是第二个Demo的行为方式（仅在浏览器很小时才会缩放）。