iPhone上的CSS媒体查询

Question

我正在尝试使用CSS媒体查询，专门针对iPhone。

当我使用常规链接rel:时，它就起作用了

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

然而，当我尝试这个媒体查询时，它不起作用：

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

如何使用CSS媒体查询来定位iPhone？

Answer 1

尝试：

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

区别在于max-device-width而不仅仅是max-width。另请参见上的2）http://blogs.sitepoint.com/iphone-development-12-tips/.

Answer 2

我知道这不是你所问的，但我刚刚回答了一些类似的问题，可能会有所帮助：

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

内容有很多参数，其中一些是：

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;  

iOS 3.1.3上UIWebView中的内容显示放大，但在iOS 4.3上显示精细

编辑：你也可以在Safari中使用这些参数，忘记uiwebview这件事，它只适用于本机应用程序。