I can confirm Matt's suggestion of width=device-width as being the secret sauce that you're seeking.
And while Pete's suggest re. retina display makes a lot of sense, beware of what makes sense in this case: the device width actually doesn't use true pixels to calculate width on iOS. So for all practical media query purposes, an iPhone or iPod touch with retina display is still functionally 320x480.
For a more detailed look at the craziness of determining screen width, device width, resolution, and where it all matters (or doesn't), there's a good A List Apart article about these matters in the current issue:
http://www.alistapart.com/articles/a-pixel-identity-crisis/
Kris
Kristofer Layon
http://twitter.com/klayon
http://kristoferlayon.com
On Jan 25, 2012, at 12:49 PM, Matt Ryan wrote:
> You might want to try adding "width=device-width" to the viewport element, like so:
>
> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
>
> Matt Ryan
> Associate Director of Web Communications, Carleton College
> [log in to unmask]
>
> From: "Jeremy Casper" <[log in to unmask]>
> To: [log in to unmask]
> Sent: Wednesday, January 25, 2012 12:44:42 PM
> Subject: Re: [WEBSTANDARDS] Media queries for mobile stylesheet
>
> Erik,
> Try putting in some javascript real quick to have it return what the device width is, it might be coming out higher than you're expecting and causing the mobile sheets not to load. Might also want to look at using screen width instead of device width.
>
> -Jeremy J. Casper
> [log in to unmask]
> University Relations
>
>
> On Jan 25, 2012, at 12:30 PM, Erik Schumann wrote:
>
> Hi everyone,
>
> Our office is developing a mobile version of our site. I'm using the following media queries to load our mobile styelsheet for phones/smartphones.
>
> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=0"/><!-- prevents the cell phone browser from zooming out on the page. -->
> <link rel="stylesheet" media="screen and (max-device-width: 480px)" type="text/css" href="mobile2.css" />
> <link rel="stylesheet" media="only screen and (max-device-width: 480px)" type="text/css" href="mobile2.css" /><!-- for iphone -->
>
> I'm using emulators to test on the various browsers (iphone, Android, Opera, Firefox, etc.). I've run into an issue where the mobile stylesheet doesn't load on Firefox mobile or iphone. All the others work fine. Anyone else have this problem or know of a solution?
>
> Thanks much,
> Erik
>
> --
> Erik Schumann
> Graphic Designer
> University Policy Program
> University of Minnesota
>
>
>
>
|