mwvbea
Last Updated: February 25, 2016
·
18.3K
· paranoida
Thumb

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 <a href="https://coderwall.com/p/bgf8aa">protip</a>

If you prefer sass/scss syntax you should check my repository on github: <a href="http://paranoida.github.com/sass-mediaqueries/">sass-mediaqueries</a>.


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)
{
   ...
}
Say Thanks
Respond

2 Responses
Add your response

5265

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

over 1 year ago ·
11080
Fcd22a4e9a75d97b747e1dfde9fbbc33 normal

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

over 1 year ago ·