当我使用媒体查询时，iPhone 4 和 iPhone 5 之间有什么区别吗？答案

【问题标题】：Is there any difference between iPhone 4 and iPhone 5 when I use media queries?当我使用媒体查询时，iPhone 4 和 iPhone 5 之间有什么区别吗？
【发布时间】：2015-02-21 03:40:20
【问题描述】：

我知道 iphone 5 的分辨率是 1136 x 640 像素，而 iphone 4 的分辨率是 960 x 640 像素。但是，当我构建响应式网站时，媒体查询是否存在差异？

那么如何判断是小屏上网本，还是新的高分辨率iphone 5呢？

【问题讨论】：

为什么需要确定？
查看这个答案stackoverflow.com/questions/16069856/…
所以我的意思是我想为移动用户隐藏广告，而不是为小分辨率的上网本隐藏广告。 @media (max-width: 1136px) { #advertise { display:none; } } ..但是此代码将在所有具有此分辨率的设备上隐藏广告 div

标签： css responsive-design media-queries

【解决方案1】：

根据this site，区别在于max-device-width：

在 iphone4 中为 480 像素

在 iphone5 中为 568 像素

iphone4

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { /* STYLES GO HERE */}

iphone5:

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) { /* STYLES GO HERE */ }

...两者都有 Device-pixel-ratio: 2 所以

iphone4 的屏幕高度= 960px（实际像素）和

iphone5 的屏幕高度 = 1136px（实际像素）

【讨论】：

【解决方案2】：

我对 Danield 的方法没有任何运气，但我个人使用这个：

@media screen and (max-width:768px){
    /* iPad 2 and under */
}
@media screen and (max-width:375px){
    /* iPhone 6 and under */
}
@media screen and (max-width:320px){
    /* iPhone 5 and under */
}
@media screen and (max-device-width:320px) and (max-device-height:480px){
    /* iPhone 4 and under */
}

如果需要，iPhone 5 也可以使用：

@media screen and (max-device-width:320px) and (device-height:568px){
    /* iPhone 5 only */
}

【讨论】：