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

Question

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)

Assume the base layout is 720x500px

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

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

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)

Answer 1

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

See an example in 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);

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.

Answer 2

One solution I'm using is working with a container in which I put an iframe that's being resized to fit as much available screen as possible without losing it's ratio. It works well but it's not completely flexible: you need to set dimensions in your content page in % if you want it to work. But if you can manage your page this way, I think it does pretty much what you want.

It goes like this. You create a container html page that's basically only styles, the resize script and the iframe call. And you content goes into the iframe page.

<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>