iPhone 6/6 Plus and Apple Watch CSS media queries

apple-mq.css

/* 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)
{ }

Thanks

Nice! Thank you!

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

Thanks! :)

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...

Thanks a lot! :))