CSS Device Media Queries Cheat Sheet

Phones

Portrait and landscape phones @media only screen and (min-device-width: 320px) and (max-device-width: 480px)
Landscape phones @media only screen and (min-width: 321px)
Portrait phones @media only screen and (max-width: 320px)

iPhone 4 and iPhone 4S

Portrait and landscape iPhone 4 and iPhone 4S

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px) 
  and (-webkit-min-device-pixel-ratio: 2)

Portrait iPhone 4 and iPhone 4S

@media only screen  
  and (min-device-width: 320px) 
  and (max-device-width: 480px) 
  and (-webkit-min-device-pixel-ratio: 2) 
  and (orientation: portrait)

Landscape iPhone 4 and iPhone 4S

@media only screen  
  and (min-device-width: 320px) 
  and (max-device-width: 480px) 
  and (-webkit-min-device-pixel-ratio: 2) 
  and (orientation: landscape)

iPhone 5 and iPhone 5S

Portrait and landscape iPhone 5 and iPhone 5S

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px) 
  and (-webkit-min-device-pixel-ratio: 2)

Portrait iPhone 5 and iPhone 5S

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px) 
  and (-webkit-min-device-pixel-ratio: 2) 
  and (orientation: portrait)

Landscape iPhone 5 and iPhone 5S

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px) 
  and (-webkit-min-device-pixel-ratio: 2) 
  and (orientation: landscape)

iPhone 6 and iPhone 6S

Portrait and landscape iPhone 6 and iPhone 6S

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)

Portrait iPhone 6 and iPhone 6S

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) 
  and (orientation: portrait)

Landscape iPhone 6 and iPhone 6S

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) 
  and (orientation: landscape)

iPhone 6 Plus and iPhone 6S Plus

Portrait and landscape iPhone 6 Plus and iPhone 6S Plus

@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)

Portrait iPhone 6 Plus and iPhone 6S Plus

@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) 
  and (orientation: portrait)

Landscape iPhone 6 Plus and iPhone 6S Plus

@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) 
  and (orientation: landscape)

Samsung Galaxy S3

Portrait and landscape Samsung Galaxy S3

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 640px) 
  and (-webkit-min-device-pixel-ratio: 2)

Portrait Samsung Galaxy S3

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 640px) 
  and (-webkit-min-device-pixel-ratio: 2) 
  and (orientation: portrait)

Landscape Samsung Galaxy S3

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 640px) 
  and (-webkit-min-device-pixel-ratio: 2) 
  and (orientation: landscape)

Samsung Galaxy S4

Portrait and landscape Samsung Galaxy S4

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 640px) 
  and (-webkit-min-device-pixel-ratio: 3)

Portrait Samsung Galaxy S4

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 640px) 
  and (-webkit-min-device-pixel-ratio: 3) 
  and (orientation: portrait)

Landscape Samsung Galaxy S4

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 640px) 
  and (-webkit-min-device-pixel-ratio: 3) 
  and (orientation: landscape)

Samsung Galaxy S5

Portrait and landscape Samsung Galaxy S5

@media only screen 
  and (min-device-width: 360px) 
  and (max-device-width: 640px) 
  and (-webkit-min-device-pixel-ratio: 3)

Portrait Samsung Galaxy S5

@media only screen 
  and (min-device-width: 360px) 
  and (max-device-width: 640px) 
  and (-webkit-min-device-pixel-ratio: 3) 
  and (orientation: portrait)

Landscape Samsung Galaxy S5

@media only screen 
  and (min-device-width: 360px) 
  and (max-device-width: 640px) 
  and (-webkit-min-device-pixel-ratio: 3) 
  and (orientation: landscape)

HTC One

Portrait and landscape HTC One

@media only screen 
  and (min-device-width: 360px) 
  and (max-device-width: 640px) 
  and (-webkit-min-device-pixel-ratio: 3)

Portrait HTC One

@media only screen 
  and (min-device-width: 360px) 
  and (max-device-width: 640px) 
  and (-webkit-min-device-pixel-ratio: 3) 
  and (orientation: portrait)

Landscape HTC One

@media only screen 
  and (min-device-width: 360px) 
  and (max-device-width: 640px) 
  and (-webkit-min-device-pixel-ratio: 3) 
  and (orientation: landscape)

iPad mini 1, iPad 1 and iPad 2

Portrait and landscape iPad mini 1, iPad 1 and iPad 2

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1)

Portrait iPad mini 1, iPad 1 and iPad 2

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) 
  and (orientation: portrait)

Landscape iPad mini 1, iPad 1 and iPad 2

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) 
  and (orientation: landscape)

iPad mini 2, iPad mini 3, iPad mini 4, iPad 3, iPad 4, iPad Air and iPad Air 2

Portrait and landscape iPad mini 2, iPad mini 3, iPad mini 4, iPad 3, iPad 4, iPad Air and iPad Air 2

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2)

Portrait iPad mini 2, iPad mini 3, iPad mini 4, iPad 3, iPad 4, iPad Air and iPad Air 2

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) 
  and (orientation: portrait)

Landscape iPad mini 2, iPad mini 3, iPad mini 4, iPad 3, iPad 4, iPad Air and iPad Air 2

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) 
  and (orientation: landscape)

iPad Pro

Portrait and landscape iPad Pro

@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (-webkit-min-device-pixel-ratio: 2)

Portrait iPad Pro

@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (-webkit-min-device-pixel-ratio: 2) 
  and (orientation: portrait)

Landscape iPad Pro

@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (-webkit-min-device-pixel-ratio: 2) 
  and (orientation: landscape)

Samsung Galaxy Tab 10.1

Portrait and landscape Samsung Galaxy Tab 10.1

@media (min-device-width: 800px) 
  and (max-device-width: 1280px)

Portrait Samsung Galaxy Tab 10.1

@media (min-device-width: 800px) 
  and (max-device-width: 1280px) 
  and (orientation: portrait)

Landscape Samsung Galaxy Tab 10.1

@media (min-device-width: 800px) 
  and (max-device-width: 1280px) 
  and (orientation: landscape)

Asus Nexus 7

Portrait and landscape Asus Nexus 7

@media only screen 
  and (min-device-width: 601px) 
  and (max-device-width: 906px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332)

Portrait Asus Nexus 7

@media only screen 
  and (min-device-width: 601px) 
  and (max-device-width: 906px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) 
  and (orientation: portrait)

Landscape Asus Nexus 7

@media only screen 
  and (min-device-width: 601px) 
  and (max-device-width: 906px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) 
  and (orientation: landscape)

Kindle Fire HD 7"

Portrait and landscape Kindle Fire HD 7"

@media only screen 
  and (min-device-width: 800px) 
  and (max-device-width: 1280px) 
  and (-webkit-min-device-pixel-ratio: 1.5)

Portrait Kindle Fire HD 7"

@media only screen 
  and (min-device-width: 800px) 
  and (max-device-width: 1280px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and and (orientation: portrait)

Landscape Kindle Fire HD 7"

@media only screen 
  and (min-device-width: 800px) 
  and (max-device-width: 1280px) 
  and (-webkit-min-device-pixel-ratio: 1.5)  
  and (orientation: landscape)

Kindle Fire HD 8.9"

Portrait and landscape Kindle Fire HD 8.9"

@media only screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1.5)

Portrait Kindle Fire HD 8.9"

@media only screen  
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and and (orientation: portrait)

Landscape Kindle Fire HD 8.9"

@media only screen  
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1.5)  
  and (orientation: landscape)

Desktops and laptops

Non-Retina screens @media only screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1)
Retina screens @media only screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi)
Desktops and laptops @media only screen and (min-width: 1224px)
Large screens @media only screen and (min-width: 1824px)

Apple Watch

@media (max-device-width: 42mm) 
  and (min-device-width: 38mm)

Moto 360 Watch

@media (max-device-width: 218px) 
  and (min-device-width: 281px)

Notes

Based on a blog post from css-tricks.com
Converted by @joelash