After some test, i have come to realize that browser scaling is just not reliable. Not only does this take up a fair amount of resources, it also has a tendency to cause mobile safari to crash. Having investigated this problem for a while, i have come to the conclusion that having the browser handle scaling, while nice to have, isn’t a good thing to rely on if you have many objects within the page.

It is actually better to detect and handle the orientation on your own. Making use of some orientation handling scripts is actually much better. Why? this is because the browser will then NOT redraw most of the elements. It would actually re-use the elements already on screen.

The codes to make use of the viewport such that it will not scale and detect rotation is as follows.

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

The javascript to assist in the detection would be something like this:-

function updateOrientation(){
    switch(window.orientation){
    case 0:
    break;
    case 180:
    break;
    case -90:
    break;
    case 90:
    break;
}

Class changes can be done in javascript to handle different CSSes when the screen is rotated.