Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
iPhone 6/6 Plus and Apple Watch CSS media queries
/* iPhone 6 landscape */
@media only screen and (min-device-width: 375px)
and (max-device-width: 667px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2)
{ }
/* iPhone 6 portrait */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2)
{ }
/* iPhone 6 Plus landscape */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 3)
{ }
/* iPhone 6 Plus portrait */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 3)
{ }
/* iPhone 6 and 6 Plus */
@media only screen
and (max-device-width: 640px),
only screen and (max-device-width: 667px),
only screen and (max-width: 480px)
{ }
/* Apple Watch */
@media
(max-device-width: 42mm)
and (min-device-width: 38mm)
{ }
@mlangone

This comment has been minimized.

Copy link

commented Dec 9, 2017

Thanks

@jamesmonsarvas

This comment has been minimized.

Copy link

commented Apr 10, 2018

Nice! Thank you!

@marcus-herrmann

This comment has been minimized.

Copy link

commented Jun 6, 2018

Regarding Apple Watch: Webkit on watchOS 5 reacts to 320px and offers a special meta tag. More: https://marcus.io/blog/websites-on-apple-watch

@saraninvincible

This comment has been minimized.

Copy link

commented Jul 15, 2018

Thanks! :)

@rowild

This comment has been minimized.

Copy link

commented Apr 27, 2019

Thank you for sharing!
I am probably missing out on an important discussion or on some facts, but why do peole not use min-resolution and max-resolution? They seem to be very well supported...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.