Last Updated: June 03, 2022
·
41.21K
· paranoida

Media Queries only for the iPhone 5! (Part I)

Using this code you will be able to add custom style rules only for the iPhone 5. If you want to target iPhone 4/4S see this protip. If you prefer sass/scss syntax you should check my repository on github: sass-mediaqueries.


Only iPhone 5 (both: landscape and portrait)

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) 
and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71)
{
   ...
}

Only iPhone 5 (portrait mode)

@media only screen and (min-device-width: 320px) and (max-device-width: 568px)
and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71) and (orientation:portrait)
{
   ...
}

Only iPhone 5 (landscape mode)

@media only screen and (min-device-width: 320px) and (max-device-width: 568px)
and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71) and (orientation:landscape)
{
   ...
}

3 Responses
Add your response

Why would you want to target one device specifically? These days we should be building sites device-agnostic surely?

over 1 year ago ·

There's always going to be device-specific quirks. Thanks a lot for helping out with iPhone 5.

over 1 year ago ·

thanks mate !

over 1 year ago ·