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

Question

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

假设基本布局为720x500px

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

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

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

Answer 1

根据您需要支持的浏览器（IE9 +），可以通过简单的CSS转换实现这一目标。

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

Answer 2

我正在使用的一种解决方案是在一个容器中工作，在该容器中放置一个经过调整大小的iframe，以适应尽可能多的可用屏幕，而不会丢失其比例。 它运作良好，但并不完全灵活：如果需要，您需要在内容页面中以％设置尺寸。 但是，如果您可以通过这种方式管理页面，我认为它几乎可以满足您的需求。

就像这样 您创建了一个容器html页面，该页面基本上只是样式，调整大小脚本和iframe调用。 您的内容进入了iframe页面。

<style>
        html, body
        {
            border: 0px;margin: 0px;
            padding:0px;
        }
        iframe
        {
            display: block; 
            border: 0px;
            margin: 0px auto;
            padding:0px;
        }
</style>

<script>
    $(document).ready(function(e){
        onResizeFn();           
    });
    $(window).resize(function(e){
        onResizeFn();
    });

    // this stretches the content iframe always either to max height or max width
    function onResizeFn(){

        var screen_ratio = 0.70 // this is your 720x500 ratio

        if((window.innerHeight/window.innerWidth) > screen_ratio){
            var theWidth = window.innerWidth 
            var theHeight = (window.innerWidth*screen_ratio);
        } else {
            var theHeight = window.innerHeight;
            var theWidth = (window.innerHeight/screen_ratio);
        }

        document.getElementById("your_iframe").width = theWidth + "px"
        document.getElementById("your_iframe").height = theHeight + "px"        
    }

</script>

// And then you call your page here
<iframe id='your_iframe' src='your_content_page' scrolling='no' frameborder='0'"></iframe>