Phonegap screen gets cut off on Retina iPad Simulator

Question

I have a Phonegap App which uses jQueryMobile 1.3.2 and Phonegap 3.1 (with the status bar plugin). Everything works fine but the iPad Retina simulator (iOS 7) shows my screen cut off at the right hand side of the screen (iPhone Retina is fine, as are all Android layouts).

I'm using:

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

...and tried with both EnableViewportScale true/false - whereas it has no effect besides the Retina 64bit - where a true will completely distort the view (I only see a green/white block), and also:

html, body { width: 100%; margin: 0; padding: 0; }

in my html pages. I have read through a few issues that iOS will return a different resolution value when "being retina", but never found anything in regards to fixing this related to phonegap.

The strange thing is, when I put set e.g. width=400 in the viewport meta tag, nothing changes... again, independent from the EnableViewportScale setting.

Thanks in advance for any clues...

Answer 1

The main issue was the StatusBar plugin I used, which caused the weird layout. After removing it, the layout was fine again.

As to the status bar - I don't really need to control it during the app so I did the following: Open the plist file (Resources/{ProjectName}-Info.plist) and add the key "View controller-based status bar appearance", set it to "NO". Also create the key / make sure that "Status bar is initially hidden" is set to "YES".

Answer 2

Try This -

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