Is it an iPhone 4 with the Retina display? If so, you may need to work in -webkit-min-device-pixel-ratio or something along those lines as their screens aren't truly 480px.

Try: http://stackoverflow.com/questions/5031482/how-to-target-iphone-3gs-and-iphone-4-in-one-media-query


On Wed, Jan 25, 2012 at 12:30 PM, Erik Schumann <[log in to unmask]> 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




--
Peter Wiringa
Electronic Communications/New Media
University Relations, University of Minnesota

"I gotta hold on to my angst. I preserve it because I need it. It keeps me sharp, on the edge, where I gotta be." - V. Hanna