Question

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

When I open up the application in Retina-mode, the application’s density is correct but the page is only half the screen size on both dimensions.

My own guess is that jQuery Mobile’s css does not scale up the widths and heights, but I haven’t been able to find anything about this.

My HTML has this:

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

And then I execute 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 are guessing correct.

Look at the JQM.css file.

It only includes media queries for hi-res/lo-res icons. Everything else is “as is” on retina and non-retina devices, so JQM only supports retina in terms of icon-size.

By specifying initial-scale=.5, maximum-scale=.5, minimum-scale=.5 you are locking everything in at 50%. So there is your non-scalable half page.

The more you tailor for retina (“high-end”) devices the more trouble you will have with standard browsers (especially “low end”, like IE7). Check the JQM iconsprite positioning in IE7 for example – if you don’t include a script like respond.js to support media queries, icons will be off-postion.

I think there is currently just not enough retina devices to warrant JQM providing a cross-browser retina and non-retina solution.

I found some good info here. I also did a CSS-only iOS tab-bar, which works down to IE7.

Check the CSS required in my plugin to just make icons and gradient backgrounds look good on all browsers and the amount of extras CSS necessary to tailor for IE7+8. A retina/non-retina JQM.css file would be nice to have but hard to download 🙂