Question: I'm making some mini-games with html5 and jQuery. They can be played on different platforms like pc or iOS or Android. I want to show the full content with fixed aspect ratio on different resolutions.

I can scale a specific object with .width() and .height(), but I'm not sure there is a better way to scale the whole content automatically, in stead of accessing every components and change their scale and position one by one.

Thank you.

Answer: 
To scale the page contents dynamically using JS and CSS, you can set the `transform: scale` property in CSS. Here is the sample code that will apply cross browser Scaling:

**HTML:**

```
<html>
<body>
    This is normal body text. <br />
    <img src="https://lh6.googleusercontent.com/-IV-xOecyuK0/UFGqw_mpjTI/AAAAAAAAATI/_gEx7d4wKqw/w300-h83-p-k/webspeaks.png" />
    <br />
    <br />
    <div id="zoom">
        <a href="#" title="Normal" class="default">Default</a>
        <a href="#" title="Medium" class="large">Large</a>
        <a href="#" title="Large" class="larger">Larger</a>
    </div>
</body>
</html>

```

**jQuery:**

```
$("#zoom a").click(function(e) {
        var $body = $("body");
        var newClass = $(this).attr('class');
        $body.removeClass("default large larger").addClass(newClass);
       e.preventDefault();
    }
);

```

**CSS:**

```
body.default {
    transform: scale(1);
    -webkit-transform: scale(1);
    -webkit-transform-origin: 0 0;
    -moz-transform: scale(1);
    -moz-transform-origin: 0 0;
    -o-transform: scale(1);
    -o-transform-origin: 0 0;
    -ms-transform: scale(1);
    -ms-transform-origin: 0 0;
}
body.large {
    transform: scale(1.5);
    -webkit-transform: scale(1.5);
    -webkit-transform-origin: 0 0;
    -moz-transform: scale(1.5);
    -moz-transform-origin: 0 0;
    -o-transform: scale(1.5);
    -o-transform-origin: 0 0;
    -ms-transform: scale(1.5);
    -ms-transform-origin: 0 0;
}
body.larger {
    transform: scale(2);
    -webkit-transform: scale(2);
    -webkit-transform-origin: 0 0;
    -moz-transform: scale(2);
    -moz-transform-origin: 0 0;
    -o-transform: scale(2);
    -o-transform-origin: 0 0;
    -ms-transform: scale(2);
    -ms-transform-origin: 0 0;
}

```

**[Live demo](http://jsfiddle.net/arvind07/Twntk/1/)**
Great @Arvind Bhardwaj!

btw, on JQuery:

```
    var nIndexZoom = 1;
    if($someDiv.css('transform') == 'none' || $someDiv.css('transform') == 'matrix(1, 0, 0, 1, 0, 0)')
        nIndexZoom = 0.5
    //Go for it!
    $someDiv.css({
        'transform'                   : 'scale('+nIndexZoom+')',
        '-webkit-transform'           : 'scale('+nIndexZoom+')',
        '-webkit-transform-origin'    : '0 0',
        '-moz-transform'              : 'scale('+nIndexZoom+')',
        '-moz-transform-origin'       : '0 0',
        '-o-transform'                : 'scale('+nIndexZoom+')',
        '-o-transform-origin'         : '0 0',
        '-ms-transform'               : 'scale('+nIndexZoom+')',
        '-ms-transform-origin'        : '0 0',
    }); 

```

Tx!