PhoneGap and Retina display

Question

I'm creating an app for iPhone using phoneGap, but I'm sure it is not working using retina display, instead of that, it is using the old iPhone3 resolution.

Is there any way to have 2 versions for iPhone when developing using phoneGap? this is, one version using retina and another version with worst resolution for the older devices.

Thanks

Answer 1

Retina.js with less CSS it will solve your problem.

On the other hand, for problems with Phonegap (e.g.: you don’t see the page like it should, instead you see everything zoomed in) after using the following code in your app:

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

Add this into your Cordova.plist:

EnableViewportScale : YES

Answer 2

Yes, but you'll need to use either CSS media queries or JavaScript.

http://troymcilvena.com/post/998277515/jquery-retina is a jQuery plugin that'll automatically handle @2x images.

In CSS, you'd need to use a media query targeting -webkit-min-device-pixel-ratio: 2 that replaces background images with their higher-resolution versions (and sets background-size).