iPhone4/4S與其他媒體查詢

我試圖只爲較小的設備獲得媒體查詢，特別是iPhone4 vs iPhone5和更大。我還沒有開始android。 I tried the media queries I found here但我沒有任何運氣。iPhone4/4S與其他媒體查詢

這是一個簡單的測試。

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="apple-mobile-web-app-capable" content="yes"> 
    <meta name="apple-mobile-web-app-status-bar-style" content="black"> 

    <meta name="HandheldFriendly" content="True"> 
    <meta name="MobileOptimized" content="320"> 
    <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0, maximum-scale=1, user-scalable=no, minimal-ui"> 
    <meta name="format-detection" content="telephone=no" /> 
<style> 
body { background-color: blue; } 

/* ----------- iPhone 4 and 4S ----------- */ 

/* Portrait and Landscape */ 
@media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 480px) 
    and (-webkit-min-device-pixel-ratio: 2) { 
    body { background-color: red; } 
} 
</style> 
</head> 
<body> 
Testing 
</body> 
</html>

我希望它是隻在iPhone4的/ 4S紅色和藍色的其他地方，而是它是紅色iPhone4上/ 4S/5/5S/6/6Plus。在iPadAir，iPad Retina和桌面上呈藍色。

我試圖從同一頁面添加iPhone5/5s查詢，所以我有iPhone4/4s查詢和iPhone5/5s查詢。在這種情況下，我在4/4s/5/5s/6/6Plus上變綠，而據推測，我應該在4/4s上變紅，在5/5s上變綠，在其他地方變成藍色。

/* ----------- iPhone 5 and 5S ----------- */ 

/* Portrait and Landscape */ 
@media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 568px) 
    and (-webkit-min-device-pixel-ratio: 2) { 
    body { background-color: green; } 
}

我嘗試了一些其他的東西。我擺脫了所有的meta標籤。不用找了。我並不關心最小設備像素比例。我所關心的只是屏幕太小而不太小。足夠大的是iPhone5/5s。任何小事我都需要做特殊的事情。

我該如何才能讓它在iPhone4上變紅？（或小於iPhone5/5s）

注意：我試圖避免設置iPhone4的東西，然後重置它們，因爲我有大約20個設置，我需要爲小屏幕進行更改。換句話說，20個設置是默認設置，只有iPhone4尺寸的屏幕才需要更改這些設置。如果可能的話，我不想設置它們3次。

換句話說，我想這

default css 
iPhone4 { 
    a few overrides 
}

不是這個

default css 
iPhone4 { 
a few overrides 
} 
notIPhone4 { 
    try to undo overrides // :(
}

來源

2015-05-29 gman

您可以使用device-aspect-ratio這是媒體查詢的另一大特點：

body { background-color: blue; } 
@media screen and (device-aspect-ratio: 2/3) { 
    body { background-color: red; } 
}

這裏比較device-aspect-ratio我從here得到：

iPhone < 5：@media screen and (device-aspect-ratio: 2/3) {}
iPhone 5：@media screen and (device-aspect-ratio: 40/71) {}
iPhone 6：@media screen and (device-aspect-ratio: 667/375) {}
iPhone 6加：@media screen and (device-aspect-ratio: 16/9) {}

而且你可真具體，如果你想要的目標只有一個型號，例如對於iPhone 6 Plus我使用以下的我從here得到：

@media only screen 
    and (min-device-width : 414px) 
    and (max-device-width : 736px) 
    and (device-width : 414px) 
    and (device-height : 736px) 
    and (orientation : portrait) 
    and (-webkit-min-device-pixel-ratio : 3) 
    and (-webkit-device-pixel-ratio : 3) 
{ ... }

來源

2015-08-08 16:21:08 Qorbani

iPhone4/4S與其他媒體查詢

回答

相關問題