CODEWITHSUNDEEP
cordovaipadios-simulator
Dallas Caley
Dallas Caley

Reputation: 5848

Phonegap app screen density is too low in iPad and black border issue

I have an app built with Phonegap. It looks fine on all iPhone screen sizes (in simulator) but i can't seem to get rid of the ugly black border. Also the screen of the app that does show within the border looks like it is way zoomed in and i can't even scroll to the bottom of the page.

Here is a screenshot of it:

enter image description here

I know it has something to do with this tag in my index.html file:

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

I can't seem to get the correct settings. Note, I have already tried using this: target-densitydpi=medium-dpi as was suggested on another similar question on this forum but that did not work (also his issue was not exactly the same as mine)

Note, this screenshot is from the 9.7 inch screen, but i would like a solution that would work for the larger iPad screen and also not break for the iPhone screens.

thanks in advance...

Upvotes: 3

Views: 278

Answers (1)

James Mallon
James Mallon

Reputation: 1127

In your config.xml file you need to enable both handsets type.

You most probably have currently:

<preference name="target-device" value="handset"/>

or you won't have any preference for target device at all. You must make an entry or change the entry above to:

<preference name="target-device" value="universal"/>

That way the build will be compatible with both iPad and iPhone devices.

Upvotes: 4

Related Questions