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 960×640 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?
You need to test the scale, like so: