Webview orientation with Phonegap

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:

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.

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 to “Webview orientation with Phonegap”

Leave a Reply

Your email address will not be published.