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。另请参阅http://blogs.sitepoint.com/iphone-development-12-tips/上的2）。

Answer 2

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

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

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

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

编辑：您也可以在Safari中使用这些参数，忘记仅适用于本机应用程序的uiwebview。

iPhone上的CSS媒体查询

2 个答案: