Phonegap, jQuery Mobile and Retina Display

Question

I am working on a PhoneGap application using jQuery Mobile. Currently I am only testing iPhone and iPhone Retina simulators.

When I open the application in Retina mode, the density of the application is correct, but on both sizes this page is half the size of the screen.

My own guess is that jQuery Mobile css does not increase width and height, but I could not find anything about it.

In my HTML, this is:

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

And then I run this Javascript:

if ($.mobile.media("screen and (min-width: 320px)")) {
    if ($.mobile.media("screen and (-webkit-min-device-pixel-ratio: 2)")) {
        $('meta[name=viewport]').attr('content','width=device-width, user-scalable=no,initial-scale=.5, maximum-scale=.5, minimum-scale=.5');
    }
}

What am I missing?

Answer 1

I think you guess correctly.

Take a look at the JQM.css file.

-res/lo-res. - " " , JQM .

initial-scale=.5, maximum-scale=.5, minimum-scale=.5, 50%. , .

( "high-end" ), ( "low end", IE7). , , JQM iconsprite IE7 - script, reply.js, , .

, , , JQM - .

. CSS-only iOS, IE7.

CSS, , CSS, IE7 + 8. JQM.css / , : -)

Answer 2

, . , .