Here are some CSS media queries useful for targeting various iPhones. Using the device-height and width alone will result in catching other mobile devices, which may be unintended.
Employ the following queries to target iPhones only.
Solid Tip: Use the meta tag <meta name="viewport" content="width=device-width, initial-scale=1">
for a proper viewing experience with your smartphone specific styles. There are many content options for the content attribute. See this Google Developer article for more info.
iPhone 5 or 5S
Portrait |
|
Landscape |
@media only screen
and (device-height : 568px)
and (device-width : 320px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation : portrait) {
} |
|
|
@media only screen
and (device-height : 568px)
and (device-width : 320px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation : landscape ) {
} |
|
Either Orientation
|
|
|
@media only screen
and (device-height : 568px)
and (device-width : 320px)
and (-webkit-min-device-pixel-ratio: 2) {
} |
| |
|
iPhone 4 or 4S
Portrait |
|
Landscape |
@media only screen
and (device-height : 480px)
and (device-width : 320px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation : portrait) {
} |
|
|
@media only screen
and (device-height : 480px)
and (device-width : 320px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation : landscape ) {
} |
|
Either Orientation
|
|
|
@media only screen
and (device-height : 480px)
and (device-width : 320px)
and (-webkit-min-device-pixel-ratio: 2) {
} |
| |
|
iPhone 2G, 3G, or 3GS
Portrait |
|
Landscape |
@media only screen
and (device-height : 480px)
and (device-width : 320px)
and (-webkit-min-device-pixel-ratio: 1)
and (orientation : portrait) {
} |
|
|
@media only screen
and (device-height : 480px)
and (device-width : 320px)
and (-webkit-min-device-pixel-ratio: 1)
and (orientation : landscape ) {
} |
|
Either Orientation
|
|
|
@media only screen
and (device-height : 480px)
and (device-width : 320px)
and (-webkit-min-device-pixel-ratio: 1) {
} |
| |
|