iPhone上的CSS媒体查询

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

它的工作原理，当我使用一个普通的link 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？

来源

2011-05-31 Ryan

尝试：

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

来源

2011-05-31 18:34:04 bensnider

同意@ bensnider。如果你有一个iPhone插件测试这个链接：http://www.jensbits.com/demos/mq/它允许你测试不同的媒体查询设置。 – 2011-05-31 18:36:45

真棒 - 谢谢@ bensnider – Ryan 2011-05-31 18:38:47

最大设备宽度工作正常（最大宽度不 - > iOS 5，xCode 4.2）。我使用WebView在iPhone/iPad上显示带格式的文本（关于页面，也用于Android和Chrome应用程序）。通过style/css我控制字体大小和其他。 – 2012-01-15 23:15:52

我exacly知道这个心不是你问什么，但我刚才已经回答类似的东西可能会有所帮助：

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

Content in UIWebView on iOS 3.1.3 appears zoomed on but on iOS 4.3 appears fine

编辑：你也可以在Safari中使用这些参数，忘记uiwebview的东西，这只是本地应用程序。

来源

2011-05-31 18:15:25

这些参数很好，但是它不能回答我的问题。我无法得到这个目标的iPhone。 – Ryan 2011-05-31 18:23:32

just incase任何人都要复制上面的内容..正确的行是： – 2013-02-17 04:41:45

@ good4m单个APOSTROPHE有什么错误？ – 2013-02-17 22:19:03

iPhone上的CSS媒体查询

回答

相关问题