iOS loading wrong style sheet based on media queries

Question

I'm working on a mobile app using Phonegap (1.4.1) / JS (jQuery Mobile 1.0) / HTML / CSS. I'm using media queries to load the right CSS file for various screen sizes, so I have the following code to load the style sheets:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" media="screen and (min-width: 720px)" href="../css/XL_global.css" />
<link rel="stylesheet" media="screen and (min-width: 480px) and (max-width: 719px)" href="../css/L_global.css" />
<link rel="stylesheet" media="screen and (min-width: 320px) and (max-width: 479px)  " href="../css/M_global.css" />
<link rel="stylesheet" media="screen and (max-width: 319px) " href="../css/S_global.css" />

My problem: On my iPhone 4S, which has a screen resolution of 960x640 pixels, the stylesheet that's loaded is M_global.css. I'm using iOS 5.1, and as far as I know, UIWebView on iOS, at least on iOS 5+ supports media queries (after all, it does load one of the stylesheets).

I've trie using min-device-width/max-device-width and -webkit-min-device-width/-webkit-max-device-width too, just to see if it made a difference, but it didn't. I've aslo tried adding the word "only" at the front of the various above mentioned combinations (i.e. media="only screen and (min-width: 480px) and (max-width: 719px)"), but that didn't help either (no surprise there really).

I've tried setting the query conditions for the M_global.css file to min-width:0 and max-width:0 just to see if it was loading that particular stylesheet regardless, but then it didn't load any CSS.

If this were an app I was making just for myself, for fun, I'd leave it be and just accept that it loaded the wrong CSS file and make the best of it. However, this is not for me, and I am not the one who will be maintaining this app, so it needs to be right.

Does anyone have any experience with such quirky behavior in iOS and have figured out a work-around?

Answer 1

You need to test the scale, like so:

media="-webkit-min-device-pixel-ratio: 2"

Answer 2

No matter what the actual pixel dimensions are of your phone, you need to realize CSS is looking at "CSS Device Pixels" which is totally different.

Your stylesheet still register that your iphone is 320x480. Your pixel density is higher, but you need to think "CSS Pixels".

Even the high resolution devices report a lower value for CSS Pixels. Google it.