iPhone上的CSS媒体查询

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?

Answer 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/ .

Answer 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.