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

【问题标题】：How to zoom in / out depending on browser height, using CSS zoom property? [closed]如何使用 CSS 缩放属性根据浏览器高度放大/缩小？ [关闭]
【发布时间】：2013-03-04 12:21:52
【问题描述】：

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

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

【问题讨论】：

注意：zoom 是 Firefox 和 Opera 不支持的非验证 CSS。如需跨浏览器缩放解决方案，请参阅CSS zoom property 和complete styles for cross browser CSS zoom。
在想了更多之后，我意识到我可能已经错误地回答了这个问题。我制作的初始演示放大了正方形，而不是整个页面。如果您需要缩放整个页面，请参阅添加到下面答案中的第二个演示。需要明确的是，您需要放大哪个页面，整个页面还是只是正方形？

标签： jquery html css zooming

【解决方案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 的行为方式（它只会在浏览器非常小的时候进行缩放）。

【讨论】：