7

我正在尝试使用 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?

4

2 回答 2

14

尝试:

<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) 。

于 2011-05-31T18:34:04.903 回答
4

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

<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;  

iOS 3.1.3 上 UIWebView 中的内容显示为放大,但在 iOS 4.3 上显示正常

编辑:您也可以在 Safari 中使用这些参数,忘记仅用于本机应用程序的 uiwebview 东西。

于 2011-05-31T18:15:25.580 回答