Webview orientation with Phonegap

1 Comment

I was having this really weird problem in PhoneGap where when the orientation would change the webview would not resize to fit the whole screen.  Turns out that the meta viewport tag was causing the problem.  My viewport setting was this:

1
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

So when I would re-orient my iPad to landscape it would still be using the device-width setting for its width.  So what I did was bind to the orientationchange event and call a JavaScript function each time the page re-oriented.  That function had this code in it.

1
2
3
4
5
6
var el = $('meta[name=viewport]');
if (window.orientation == 90 || window.orientation == -90) {
el.attr('content', 'width=device-height');
} else {
el.attr('content', 'width=device-width');
}

Now the orientation works in both portrait and landscape.

One thought on “Webview orientation with Phonegap

Leave a Reply

Your email address will not be published. Required fields are marked *