媒体查询，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

回答

相关问题