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媒體查詢

回答

相關問題