如何放大/缩小取决于浏览器的高度，使用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;
}

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演示。

当放大整个页面时，我发现在所有浏览器中都会出现水平滚动条，这对可用性非常不利。为了避免这种情况，缩小浏览器的小窗口，但不要放大大窗口。这是第二个演示的行为(它只会在浏览器非常小的时候缩放)。