檢測併爲iPhone 3和iPhone 4

我試圖定義不同樣式的iPhone 3和iPhone 4這樣檢測併爲iPhone 3和iPhone 4

<link href="css/style.css" rel="stylesheet" type="text/css" /> 
<link rel="stylesheet" media="all and (max-device-width: 320px)" href="iphone3.css" /> 
<link rel="stylesheet" media="all and (max-device-width: 640px)" href="iphone4.css" />

兩者iphone3.css鏈接不同的樣式和iphone4.css有body{display:none;}測試他們正在工作，但在我的iphone4我仍然看到網站，

我錯過了什麼？

謝謝！

來源

2011-08-28 Toni Michel Caubet

您已經在兩處引用了'iphone3.css' ... – ceejayoz

ahá，我做了，但是他們有相同的內容..顯示：none都在兩個文件中：S –

這將同時針對iPhone 3和4：

@media only screen and (max-device-width: 480px){ 
    body{background:red;} 
}

或

<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone3.css" />

您可以使用此查詢，然後覆蓋以前的風格和目標僅適用於iPhone 4：

@media only screen and (-webkit-min-device-pixel-ratio: 2){ 
    body{background:blue;} 
}

或

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" href="iphone4.css" />

來源

2011-08-28 21:02:31 tw16

@media only screen and (max-width: 480px){ 
    body{background:red;} 
}

來源

2013-12-24 10:38:32

檢測併爲iPhone 3和iPhone 4

回答

相關問題