按比例缩放网站以适合浏览器窗口 [英] Proportionally scale website to fit browser window

问题描述

将整个网站按比例缩放和居中以适合浏览器窗口（并在调整大小后进行更新）的绝佳解决方案

What would be an elegant solution to proportionally scale and center an entire website to fit a browser window (and updating as it's re-sized)

假定基本布局是720x500px

Assume the base layout is 720x500px

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

Content should proportionally scale to fit, and then re-center.

本质上，应像这样操作Flash插件： http://site-old.greensock.com/autofitarea/ （尽管基础

Essentially, operating like this Flash plugin: http://site-old.greensock.com/autofitarea/ (though base size is known)

站点将在720x500的区域中包含几种不同类型的元素...理想的解决方案是缩放整个对象，而无需为每个元素设置样式（以防万一-图像将是SVG，因此缩放应该不会对分辨率产生负面影响）

Site will contain several different types of elements in that 720x500 area... ideal solution would just scale the whole thing, not needing to style each individual element (in case it matters- images will be SVG and so scaling should have no negative affect on resolution)

推荐答案

取决于浏览器您需要支持（IE9 +），则可以通过简单的 CSS转换。

Depending on the browsers you need to support (IE9+), you could achieve that with simple CSS transform.

请参见此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来控制比例。我认为那会非常费力。

If you need backwards compatibility, you could size everything in your site with % or em, and use a similar javascript to control the scale. I think that would be very laborious though.

这篇关于按比例缩放网站以适合浏览器窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！