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

Question

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

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

Answer 1

根据这个站点，区别在于最大设备宽度：

在 iphone4 中是 480px

在 iphone5 中是 568px

iphone4

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

iphone 5：

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

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

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

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

Answer 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 */
}