css - メディアクエリを使用する場合、iPhone 4 と iPhone 5 で違いはありますか?

Question

iPhone 5 の解像度が 1136 x 640 px で、iPhone 4 の解像度が 960 x 640 px であることはわかっています。しかし、レスポンシブ Web サイトを構築する場合、メディア クエリに違いはありますか?

では、それが小さな画面のネットブックなのか、それとも高解像度の新しい iPhone 5 なのかをどのように判断すればよいでしょうか?

Answer 1

このサイトによると、違いは max-device-width にあります。

iphone4では480pxです

iphone5では568pxです

iphone 4

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