Device Queries - sgml/signature GitHub Wiki

CSS Device Media Queries Enjoy this cheat sheet at its fullest within Dash, the macOS documentation browser. 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: 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 Apple Watch

@media (max-device-width: 42mm) and (min-device-width: 38mm) Moto 360 Watch 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 You can modify and improve this cheat sheet here