Change scale appropriately from portrait to landscape at an iPhone in a HTML5 hybrid application.

There is a way to doctor up the viewport metatag as I elude to here. In the example I got to work, I have a single viewport tag which looks like this:

<meta name="viewport" id="viewport" content="width=device-width, width=320">

 
 

The following code gets the height and width of the browser. I don't use the height, so my example below is a little dirty. I found the code for getting the browser size somewhere online. Maybe at Stack Overflow. I dunno. Anyways, I then use the width to doctor up the viewport tag. I tried this in a web page and it worked at my iPhone. The scale changes appropriately from portrait to landscape. Yay!

$(function () {
   setInterval("my_function();",500);
});
function my_function(){
   winwidth = document.all ? document.body.clientWidth : window.innerWidth;
   winHeight = document.all ? document.body.clientHeight : window.innerHeight;
   if (winwidth < 400) {
      document.getElementById("viewport").setAttribute('content', 'width=device-width,
            width=320, maximum-scale=1.0, minimum-scale=1.0');
   }
   else
   {
      document.getElementById("viewport").setAttribute('content', 'width=device-width,
            width=480, maximum-scale=1.0, minimum-scale=1.0');
   }
}