Any way to auto zoom browser based upon user's browser window?

Question

Is there any way to (across browsers) cause my website to auto zoom based on the user's browser window.

I have a web app that is a fixed aspect ratio. It needs to be this way as the central function (video) is intended to stay on screen at all times. I will be using the sidebar with internal div for scrollable content. View my code below or the following fiddle to see the basic structure: http://jsfiddle.net/hkdeA/6/

I've currently developed this in one size and first thought to translate all pixel data to percentages, i.e. responsive design, with even the containing div recalculating based upon the browser window (to either fit 100% height or 100% width). However, unlike most responsive design, EVERY element on my page needs to be scaled equally. To me, this creates a unique opportunity. Most responsive design could never utilize browser zoom to do the job because they only want some elements to scale up or down. For me, everything should go in unison. Going through every line of CSS to turn pixel values to percentages is a time consuming headache and I was hoping that, if possible, I could utilize browser zoom.

However, is a way for me to access the browsers zooming capability and zoom the exact distance necessary to fit the browser window (in either height or width, depending on aspect ratio of browser window)? I'd think two steps would be necessary.

1. Being able to actually access the zoom functionality without the user.

2. Being able to calculate the zoom necessary (seems easy enough, as my design is a fixed width so any browser window size could be calculated and compared to my design and necessary zoom % calculated) and push that to the user's browser (for only my site!)

But is it possible? The first replier has said no, no script can currently do this, but I was hoping to see if anyone else has some insight. Any and all help appreciated. Thanks!

    <div id="container">
    <div id="vid">

    </div>
    <div id="sidebar">

    </div>
    <div id="footer">

    </div>    
</div>

#container{
    background:grey;
    width:480px;
    height:270px;
    float:left;
}

#vid{
    background:black;
    width:320px;
    height:180px;
    float:left;
}

#sidebar{
    background:blue;
    width:160px;
    height:180px;
    float:right;
}

#foot{
    background:yellow;
    width:480px;
    height:90px;
    float:left;
}

Answer 1

You can resize any element based on window dimensions and the aspect ratio of your video

var videoAspect= 600/400;/* normalWidth/normalHeight*/

var $window = $(window), windowW= $window.width(), windowH= $window.height();
var windowAspect= windowW/windowH;
var sizes={ }
if( windowAspect > videoAspect){
   /* wider so set height 100% and adjust width*/
    sizes.height=windowH;
    sizes.width = windowH * videoAspect;
}else{
    sizes.width=windowW;
    sizes.height = windowW / videoAspect; 
}

$('#container').css( sizes);

DEMO: http://jsfiddle.net/hkdeA/

Answer 2

Maybe this script is for you. The script also calculate the scrollbar size if needed. You will need a block (div, span, etc...) with the wrapper id.

This is a cross-browser script, it supports all the modern browsers.

I hope you like it. Feel free to use!

// DONT FORGET TO ADD THIS TO YOUR WRAPPER'S CSS BLOCK
// THIS WILL KEEP YOUR SITE CENTERED
// IF YOU USE margin-left:auto; margin-right:auto;

// transform-origin: 50% 0%;
// -ms-transform-origin: 50% 0%;
// -moz-transform-origin: 50% 0%;
// -webkit-transform-origin: 50% 0%;
// -o-transform-origin: 50% 0%;

function FitToScreen(FitType)
{
    var Wrapper = document.getElementById('wrapper');

    var ScreenWidth = window.innerWidth;
    var ScreenHeight = window.innerHeight;

    var WrapperWidth = Wrapper.offsetWidth;
    var WrapperHeight = Wrapper.offsetHeight + 200;

    var WidthRatio = parseFloat(ScreenWidth/WrapperWidth);
    var HeightRatio = parseFloat(ScreenHeight/WrapperHeight);

    var ScaleRatio = 1.0;

    if (FitType == 'width')
    {
        ScaleRatio = WidthRatio;
        if(ScaleRatio * WrapperHeight > ScreenHeight)
        {
            ScaleRatio = parseFloat(ScreenWidth/(WrapperWidth + GetScrollBarWidth () -1));
        }
    }
    else if (FitType == 'height')
    {
        ScaleRatio = HeightRatio;
        if(ScaleRatio * WrapperWidth > ScreenWidth)
        {
            ScaleRatio = parseFloat(ScreenHeight/(WrapperHeight + GetScrollBarWidth () -1));
        }
    }

    var ScaleText = 'scale(' + ScaleRatio.toString().replace(',','.') + ')';

    //Chrome and Safari
        Wrapper.style.webkitTransform = ScaleText;
    //Firefox
        Wrapper.style.MozTransform = ScaleText;
    //Internet Explorer
        Wrapper.style.msTransform = ScaleText;
    //Opera
        Wrapper.style.OTransform = ScaleText;
    //Standard
        Wrapper.style.transform = ScaleText;
}

function GetScrollBarWidth ()
{
    var inner = document.createElement('p');
    inner.style.width = '100%';
    inner.style.height = '200px';

    var outer = document.createElement('div');
    outer.style.position = 'absolute';
    outer.style.top = '0px';
    outer.style.left = '0px';
    outer.style.visibility = 'hidden';
    outer.style.width = '200px';
    outer.style.height = '150px';
    outer.style.overflow = 'hidden';
    outer.appendChild (inner);

    document.body.appendChild (outer);
    var w1 = inner.offsetWidth;
    outer.style.overflow = 'scroll';
    var w2 = inner.offsetWidth;
    if (w1 == w2) w2 = outer.clientWidth;

    document.body.removeChild (outer);
    return (w1 - w2);
}