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: 
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!
Maybe 'find' using the unversal selector \* will work? If \* is too heavy handed try selecting individual elements as required.

```
var scaling = .5;
$('#someElement').find('*').each(function () {
    var fSize = Number($(this).css('fontSize').replace(/[^0-9\.]+/g, ""));
    $(this).outerWidth($(this).outerWidth() * scaling);
    $(this).css('fontSize', fSize * scaling));
});

```