媒體查詢，iPhone 4S和iPhone 5

/* iphone retina portrait, 4inch (iphone 5 and up) */ 
@media only screen and (-webkit-min-device-pixel-ratio : 2) and (device-aspect-ratio: 40/71) { 
    body { 
     background-color: red; 
    } 
} 

/* retina, iphone, portrait, 3.5inch (iphone 4) */ 
@media only screen and (-webkit-min-device-pixel-ratio : 2) and (device-aspect-ratio: 2/3) { 
    body { 
     background-color: yellow; 
    } 
}

努力，但沒有工作，任何想法，我要iPhone 4之間的確切區分，iPhone 4S和iPhone 5的媒體查詢，iPhone 4S和iPhone 5

來源

2014-04-29 user2727195

對於iPhone5，我使用像素比率1.5。對於iPhone 4/4S，我使用像素寬度和像素比率的組合。

/* iPhone5+ */ 
@media 
    only screen and (-webkit-min-device-pixel-ratio: 1.5), 
    only screen and (min--moz-device-pixel-ratio: 1.5), 
    only screen and (min-device-pixel-ratio: 1.5){ 
    body { 
     background-color: red; 
    } 
} 

/* iPhone 4/4S */ 
@media 
    only screen and (min-device-width: 320px) 
    and (max-device-width: 480px) 
    and (-webkit-device-pixel-ratio: 2) 
    and (device-aspect-ratio: 2/3) 
{ 
    body { 
     background-color: yellow; 
    } 
}

來源

2014-04-29 00:49:10 Michio

能否請你劃分4個4S分別 – user2727195

在iPhone 4和iPhone 4S具有相同的屏幕尺寸：http://www.everymac.com/systems/apple/iphone/specs/apple- iPhone-4S-specs.html。您可能必須使用Javascript來檢測設備並加載不同的CSS。 – Michio

我會建議使用絕對寬度像素如下：

@media (min-width: 768px) and (max-width: 991px) { 

}

只需用手機尺寸替換寬度，你應該是好的。

來源

2014-04-29 00:36:00

下面的代碼是肯定的，我已經嘗試過，並得到它的工作。只是認爲它可以幫助別人節省時間。來源：this和this

/*iPhone 4 and 4S landscape*/ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : landscape) { 

h1, .h1{ 
    font-size:26px; 
} 

.mt-4x{ 
    margin-top:20px !important; 
} 
}

/iPhone 4和4S肖像/

@media screen and (max-device-width: 480px) and (orientation: portrait){ 

h1, .h1{ 
    font-size:26px; 
} 

.mt-4x{ 
    margin-top:20px !important; 
} 
}

來源

2016-04-29 13:05:50 sumedha

hi @sumedha我從Michio的回答中學到的是，4和4s具有相同的媒體查詢 – user2727195

@ user2727195是的，這是4和4s，縱向和橫向屏幕。 – sumedha

媒體查詢只爲iPhone 4/4S

僅適用於iPhone 4/4S（包括：風景和人像）

@media only screen and (min-device-width: 320px) and (max-device-width: 
480px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3) 
{ 
    ... 
}

只有iPhone 4/4S（肖像模式）

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3) and (orientation:portrait) 
{ 
    ... 
}

只有iPhone 4/4S（橫向模式）

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3) and (orientation:landscape) 
{ 
    ... 
}

iPhone 5只

@media screen and (device-aspect-ratio: 40/71) { 
    ... 
}

Also more

來源

2017-12-11 09:57:02 Bipon

媒體查詢，iPhone 4S和iPhone 5

回答

相關問題