bgf8aa
Last Updated: February 25, 2016
·
17.55K
· paranoida
Thumb

Media Queries only for the iPhone 4/4S! (Part II)

Using this code you will be able to add custom style rules only for the iPhone 4/4S. If you want to target iPhone 5 see this <a href="https://coderwall.com/p/mwvbea">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 4/4S (both: landscape and portrait)

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

Only iPhone 4/4S (portrait mode)

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

Only iPhone 4/4S (landscape mode)

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

1 Response
Add your response

17689
964ceafb4127cac2c9b4d0e979acf6a4

When you AND all those together with a "webkit" predicate, doesn't it negate the entire thing for non-webkit users?

Chrome/Safari will work, and since FF is not supported, it probably won't matter, but Opera and others won't get triggered. Just a thought.

over 1 year ago ·