Question

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

Answer 1

仅适用于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) {
    ...
}

More

Also more

Answer 2

对于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;
    }
}

Answer 3

我建议使用像素这样的绝对宽度：

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

}

只需用手机尺寸替换宽度，你应该很好。

Answer 4

以下代码肯定。我已经尝试并使其正常工作。只是认为它可以帮助别人节省时间。来源：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;
}
}

媒体查询iPhone 4，iPhone 4s和iPhone 5

4 个答案: