javascript - 按比例缩放网站以适合浏览器窗口

这是一个优雅的解决方案，可以按比例缩放和居中整个网站以适合浏览器窗口(并在调整大小时进行更新)

假设基本布局为720x500px

内容应按比例缩放以适合，然后重新居中。

本质上，像这样的Flash插件进行操作:http://site-old.greensock.com/autofitarea/(尽管已知基本大小)

网站将在720x500区域中包含几种不同类型的元素...理想的解决方案将只是缩放整个内容，而无需对每个元素进行样式设置(以防万一，图像将是SVG，因此缩放不应对SVG解析度)

最佳答案

根据您需要支持的浏览器(IE9 +)，可以使用简单的CSS transform来实现。

查看this jsfiddle中的示例

var $win = $(window);
var $lay = $('#layout');
var baseSize = {
    w: 720,
    h: 500
}

function updateScale() {

    var ww = $win.width();
    var wh = $win.height();
    var newScale = 1;

    // compare ratios
    if(ww/wh < baseSize.w/baseSize.h) { // tall ratio
        newScale = ww / baseSize.w;
    } else { // wide ratio
        newScale = wh / baseSize.h;
    }

    $lay.css('transform', 'scale(' + newScale + ',' +  newScale + ')');

    console.log(newScale);
}

$(window).resize(updateScale);

如果需要向后兼容，则可以使用%或em调整网站中所有内容的大小，并使用类似的javascript来控制缩放比例。我认为那将非常费力。