Question

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

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

Answer 1

这是一个起点（为Firefox和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();
});

<强>更新

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

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

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

1 个答案: