Setting correct viewport for landscape

Question

Hi there I'm having a problem with setting device width on mobile devices. The problem is that when I go from portrait to landscape on iPhone i get my page scaled to half the width of screen and the rest is black. When I'm in portrait mode i see the page just fine. So all the info:

 page-width:640px;
 viewport: <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, minimum-scale=0.5, maximum-scale=2.0">

I also tried setting new viewport on orientation change but no effect. I tired like that:

 <script type="text/javascript">
(function(doc) {
var vpwidth = 320;
var vlwidth = 640;
function doOnOrientationChange()
{
switch(window.orientation) 
{  
 case 0: //portrait
      //set the viewport attributes to whatever you want!
        viewport.setAttribute('content', 'width=' + vpwidth + ', initial-scale=0.5, maximum-scale=2.0;')
      break;
    case 90: case -90: //landscape
      //set the viewport attributes to whatever you want!
        viewport.setAttribute('content', 'width=' + vlwidth + ', initial-scale=1, maximum-scale=2.0;')
      break;
    default:
      //set the viewport attributes to whatever you want!
        viewport.setAttribute('content', 'width=' + vpwidth + ', initial-scale=0.25, maximum-scale=2.0, minimum-scale=1.0;')
      break;
}
}

window.addEventListener('orientationchange', doOnOrientationChange);

// Initial execution if needed
 doOnOrientationChange();

}(document));
 </script>