CSS media query on iPhone

Question

I'm trying to use a CSS media query, specifically targeting the iPhone.

It works when I use a regular link rel:

<link rel="stylesheet" type="text/css" href="css/mobile.css" />

However, when I try this media query it doesn't work:

<link rel="stylesheet" type="text/css" href="css/mobile.css" 
      media="only screen and (max-width: 640px)" /> 

How can I use a CSS media query to target the iPhone?

Solution 1

Try:

<link rel="stylesheet" type="text/css" href="css/mobile.css" media="only screen and (max-device-width: 480px)" />

The difference is max-device-width instead of just max-width. Also see 2) on http://blogs.sitepoint.com/iphone-development-12-tips/.

Solution 2

I know this isnt exacly what you asked but i have just answered something similar and may help:

<meta name='viewport' content='width=device-width; initial-scale=1.0;' />

There are plenty of parameters for CONTENT, some of them are:

maximum-scale=3.0; //Maximum zoom allowed 0 to 10.0. default is 1.6
minimum-scale=0.5; //Minimum zoom allowed 0 to 10.0. default is 0.25
user-scalable=1; //YES/NO
width=device-width; //default if not set is 980px 
initial-scale=1.0; //Initial zoom. 0 to 10.0. 1.0 would be 100%
height=device-height;  

Content in UIWebView on iOS 3.1.3 appears zoomed on but on iOS 4.3 appears fine

Edit: You can use these params in Safari too, forget the uiwebview thing thats just for native applications.

Comments

[Ryan]

Those parameters are great, however, it doesn't answer my question. I can't get this to target the iPhone.

[jk.]

Agree with @bensnider. If you have an iPhone to test on plug in this link: jensbits.com/demos/mq It allows you to test different media query settings.

[Michael Biermann]

max-device-width works fine (max-width does not -> iOS 5, xCode 4.2). I use WebView to display formatted text (about page, also used for Android and Chrome app) on iPhone/iPad. Via style/css I control font-size and others.

[JP_]

just incase anyone is gonna copy the above.. the correct line is: <meta name="viewport" content="width=device-width, initial-scale=1.0">