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进行定位？

- Ryan

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/上的第二条建议。

- bensnider

---

同意@bensnider的观点。如果您有iPhone可供测试，请插入此链接：http://www.jensbits.com/demos/mq/。它允许您测试不同的媒体查询设置。 - jk.

max-device-width 运行良好（max-width 不行 -> iOS 5，xCode 4.2）。我使用 WebView 在 iPhone/iPad 上显示格式化文本（关于页面，也用于 Android 和 Chrome 应用程序）。通过 style/css 控制字体大小和其他样式。 - Michael Biermann

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;  

UIWebView在iOS 3.1.3上显示的内容缩放了，但在iOS 4.3上则正常

编辑：您也可以在Safari中使用这些参数，忘记uiwebview吧，那只是针对原生应用程序的。

- Nicolas S

---

这些参数很好，但它并没有回答我的问题。我无法将其定位到iPhone上。 - Ryan

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 的正确代码行是这个，以防有人复制上面的错误代码。 - JP_