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) Assume the base layout is 720x500px C

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

functionupdateScale() {

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

    // compare ratiosif(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.

Solution 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 widthfunctiononResizeFn(){

        var screen_ratio = 0.70// this is your 720x500 ratioif((window.innerHeight/window.innerWidth) > screen_ratio){
            var theWidth = window.innerWidthvar 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
<iframeid='your_iframe'src='your_content_page'scrolling='no'frameborder='0'"></iframe>