Device Specific CSS Media Queries Collection
| /* | |
| Based on: | |
| 1. http://stephen.io/mediaqueries | |
| 2. https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ | |
| */ | |
| /* iPhone X in portrait & landscape */ | |
| @media only screen | |
| and (min-device-width : 375px) | |
| and (max-device-width : 812px) | |
| and (-webkit-device-pixel-ratio : 3) { | |
| } | |
| /* iPhone X in landscape */ | |
| @media only screen | |
| and (min-device-width : 375px) | |
| and (max-device-width : 812px) | |
| and (-webkit-device-pixel-ratio : 3) | |
| and (orientation : landscape) { | |
| } | |
| /* iPhone X in portrait */ | |
| @media only screen | |
| and (min-device-width : 375px) | |
| and (max-device-width : 812px) | |
| and (-webkit-device-pixel-ratio : 3) | |
| and (orientation : portrait) { | |
| } | |
| /* iPhone 6, 7, & 8 in portrait & landscape */ | |
| @media only screen | |
| and (min-device-width : 375px) | |
| and (max-device-width : 667px) { | |
| } | |
| /* iPhone 6, 7, & 8 in landscape */ | |
| @media only screen | |
| and (min-device-width : 375px) | |
| and (max-device-width : 667px) | |
| and (orientation : landscape) { | |
| } | |
| /* iPhone 6, 7, & 8 in portrait */ | |
| @media only screen | |
| and (min-device-width : 375px) | |
| and (max-device-width : 667px) | |
| and (orientation : portrait) { | |
| } | |
| /* iPhone 6, 7, & 8 Plus in portrait & landscape */ | |
| @media only screen | |
| and (min-device-width : 414px) | |
| and (max-device-width : 736px) { | |
| } | |
| /* iPhone 6, 7, & 8 Plus in landscape */ | |
| @media only screen | |
| and (min-device-width : 414px) | |
| and (max-device-width : 736px) | |
| and (orientation : landscape) { | |
| } | |
| /* iPhone 6, 7, & 8 Plus in portrait */ | |
| @media only screen | |
| and (min-device-width : 414px) | |
| and (max-device-width : 736px) | |
| and (orientation : portrait) { | |
| } | |
| /* iPhone 6 in portrait & landscape */ | |
| @media only screen | |
| and (min-device-width : 375px) | |
| and (max-device-width : 667px) { | |
| } | |
| /* iPhone 6 in landscape */ | |
| @media only screen | |
| and (min-device-width : 375px) | |
| and (max-device-width : 667px) | |
| and (orientation : landscape) { | |
| } | |
| /* iPhone 6 in portrait */ | |
| @media only screen | |
| and (min-device-width : 375px) | |
| and (max-device-width : 667px) | |
| and (orientation : portrait) { | |
| } | |
| /* iPhone 6 Plus in portrait & landscape */ | |
| @media only screen | |
| and (min-device-width : 414px) | |
| and (max-device-width : 736px) { | |
| } | |
| /* iPhone 6 Plus in landscape */ | |
| @media only screen | |
| and (min-device-width : 414px) | |
| and (max-device-width : 736px) | |
| and (orientation : landscape) { | |
| } | |
| /* iPhone 6 Plus in portrait */ | |
| @media only screen | |
| and (min-device-width : 414px) | |
| and (max-device-width : 736px) | |
| and (orientation : portrait) { | |
| } | |
| /* iPhone 5 & 5S in portrait & landscape */ | |
| @media only screen | |
| and (min-device-width : 320px) | |
| and (max-device-width : 568px) { | |
| } | |
| /* iPhone 5 & 5S in landscape */ | |
| @media only screen | |
| and (min-device-width : 320px) | |
| and (max-device-width : 568px) | |
| and (orientation : landscape) { | |
| } | |
| /* iPhone 5 & 5S in portrait */ | |
| @media only screen | |
| and (min-device-width : 320px) | |
| and (max-device-width : 568px) | |
| and (orientation : portrait) { | |
| } | |
| /* | |
| iPhone 2G, 3G, 4, 4S Media Queries | |
| It's noteworthy that these media queries are also the same for iPod Touch generations 1-4. | |
| */ | |
| /* iPhone 2G-4S in portrait & landscape */ | |
| @media only screen | |
| and (min-device-width : 320px) | |
| and (max-device-width : 480px) { | |
| } | |
| /* iPhone 2G-4S in landscape */ | |
| @media only screen | |
| and (min-device-width : 320px) | |
| and (max-device-width : 480px) | |
| and (orientation : landscape) { | |
| } | |
| /* iPhone 2G-4S in portrait */ | |
| @media only screen | |
| and (min-device-width : 320px) | |
| and (max-device-width : 480px) | |
| and (orientation : portrait) { | |
| } | |
| /* iPad in portrait & landscape */ | |
| @media only screen | |
| and (min-device-width : 768px) | |
| and (max-device-width : 1024px) { | |
| } | |
| /* iPad in landscape */ | |
| @media only screen | |
| and (min-device-width : 768px) | |
| and (max-device-width : 1024px) | |
| and (orientation : landscape) { | |
| } | |
| /* iPad in portrait */ | |
| @media only screen | |
| and (min-device-width : 768px) | |
| and (max-device-width : 1024px) | |
| and (orientation : portrait) { | |
| } | |
| /* Galaxy S3 portrait and landscape */ | |
| @media screen | |
| and (device-width: 320px) | |
| and (device-height: 640px) | |
| and (-webkit-device-pixel-ratio: 2) { | |
| } | |
| /* Galaxy S3 portrait */ | |
| @media screen | |
| and (device-width: 320px) | |
| and (device-height: 640px) | |
| and (-webkit-device-pixel-ratio: 2) | |
| and (orientation: portrait) { | |
| } | |
| /* Galaxy S3 landscape */ | |
| @media screen | |
| and (device-width: 320px) | |
| and (device-height: 640px) | |
| and (-webkit-device-pixel-ratio: 2) | |
| and (orientation: landscape) { | |
| } | |
| /* Galaxy S4 portrait and landscape */ | |
| @media screen | |
| and (device-width: 320px) | |
| and (device-height: 640px) | |
| and (-webkit-device-pixel-ratio: 3) { | |
| } | |
| /* Galaxy S4 portrait */ | |
| @media screen | |
| and (device-width: 320px) | |
| and (device-height: 640px) | |
| and (-webkit-device-pixel-ratio: 3) | |
| and (orientation: portrait) { | |
| } | |
| /* Galaxy S4 landscape */ | |
| @media screen | |
| and (device-width: 320px) | |
| and (device-height: 640px) | |
| and (-webkit-device-pixel-ratio: 3) | |
| and (orientation: landscape) { | |
| } | |
| /* Galaxy S5 portrait and landscape */ | |
| @media screen | |
| and (device-width: 360px) | |
| and (device-height: 640px) | |
| and (-webkit-device-pixel-ratio: 3) { | |
| } | |
| /* Galaxy S5 portrait */ | |
| @media screen | |
| and (device-width: 360px) | |
| and (device-height: 640px) | |
| and (-webkit-device-pixel-ratio: 3) | |
| and (orientation: portrait) { | |
| } | |
| /* Galaxy S5 landscape */ | |
| @media screen | |
| and (device-width: 360px) | |
| and (device-height: 640px) | |
| and (-webkit-device-pixel-ratio: 3) | |
| and (orientation: landscape) { | |
| } | |
| /* HTC One portrait and landscape */ | |
| @media screen | |
| and (device-width: 360px) | |
| and (device-height: 640px) | |
| and (-webkit-device-pixel-ratio: 3) { | |
| } | |
| /* HTC One portrait */ | |
| @media screen | |
| and (device-width: 360px) | |
| and (device-height: 640px) | |
| and (-webkit-device-pixel-ratio: 3) | |
| and (orientation: portrait) { | |
| } | |
| /* HTC One landscape */ | |
| @media screen | |
| and (device-width: 360px) | |
| and (device-height: 640px) | |
| and (-webkit-device-pixel-ratio: 3) | |
| and (orientation: landscape) { | |
| } | |
| /* | |
| iPad 3 & 4 Media Queries | |
| If you're looking to target only 3rd and 4th generation Retina iPads | |
| (or tablets with similar resolution) to add @2x graphics, | |
| or other features for the tablet's Retina display, use the following media queries. | |
| */ | |
| /* Retina iPad in portrait & landscape */ | |
| @media only screen | |
| and (min-device-width : 768px) | |
| and (max-device-width : 1024px) | |
| and (-webkit-min-device-pixel-ratio: 2) { | |
| } | |
| /* Retina iPad in landscape */ | |
| @media only screen | |
| and (min-device-width : 768px) | |
| and (max-device-width : 1024px) | |
| and (orientation : landscape) | |
| and (-webkit-min-device-pixel-ratio: 2) { | |
| } | |
| /* Retina iPad in portrait */ | |
| @media only screen | |
| and (min-device-width : 768px) | |
| and (max-device-width : 1024px) | |
| and (orientation : portrait) | |
| and (-webkit-min-device-pixel-ratio: 2) { | |
| } | |
| /* | |
| iPad 1 & 2 Media Queries | |
| If you're looking to supply different graphics or choose different typography | |
| for the lower resolution iPad display, the media queries below will work | |
| like a charm in your responsive design! | |
| */ | |
| /* iPad 1 & 2 in portrait & landscape */ | |
| @media only screen | |
| and (min-device-width : 768px) | |
| and (max-device-width : 1024px) | |
| and (-webkit-min-device-pixel-ratio: 1) { | |
| } | |
| /* iPad 1 & 2 in landscape */ | |
| @media only screen | |
| and (min-device-width : 768px) | |
| and (max-device-width : 1024px) | |
| and (orientation : landscape) | |
| and (-webkit-min-device-pixel-ratio: 1) { | |
| } | |
| /* iPad 1 & 2 in portrait */ | |
| @media only screen | |
| and (min-device-width : 768px) | |
| and (max-device-width : 1024px) | |
| and (orientation : portrait) | |
| and (-webkit-min-device-pixel-ratio: 1) { | |
| } | |
| /* iPad mini in portrait & landscape */ | |
| @media only screen | |
| and (min-device-width : 768px) | |
| and (max-device-width : 1024px) | |
| and (-webkit-min-device-pixel-ratio: 1) { | |
| } | |
| /* iPad mini in landscape */ | |
| @media only screen | |
| and (min-device-width : 768px) | |
| and (max-device-width : 1024px) | |
| and (orientation : landscape) | |
| and (-webkit-min-device-pixel-ratio: 1) { | |
| } | |
| /* iPad mini in portrait */ | |
| @media only screen | |
| and (min-device-width : 768px) | |
| and (max-device-width : 1024px) | |
| and (orientation : portrait) | |
| and (-webkit-min-device-pixel-ratio: 1) { | |
| } | |
| /* Galaxy Tab 10.1 portrait and landscape */ | |
| @media | |
| (min-device-width: 800px) | |
| and (max-device-width: 1280px) { | |
| } | |
| /* Galaxy Tab 10.1 portrait */ | |
| @media | |
| (max-device-width: 800px) | |
| and (orientation: portrait) { | |
| } | |
| /* Galaxy Tab 10.1 landscape */ | |
| @media | |
| (max-device-width: 1280px) | |
| and (orientation: landscape) { | |
| } | |
| /* Asus Nexus 7 portrait and landscape */ | |
| @media screen | |
| and (device-width: 601px) | |
| and (device-height: 906px) | |
| and (-webkit-min-device-pixel-ratio: 1.331) | |
| and (-webkit-max-device-pixel-ratio: 1.332) { | |
| } | |
| /* Asus Nexus 7 portrait */ | |
| @media screen | |
| and (device-width: 601px) | |
| and (device-height: 906px) | |
| and (-webkit-min-device-pixel-ratio: 1.331) | |
| and (-webkit-max-device-pixel-ratio: 1.332) | |
| and (orientation: portrait) { | |
| } | |
| /* Asus Nexus 7 landscape */ | |
| @media screen | |
| and (device-width: 601px) | |
| and (device-height: 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 */ | |
| @media only screen | |
| and (min-device-width: 800px) | |
| and (max-device-width: 1280px) | |
| and (-webkit-min-device-pixel-ratio: 1.5) { | |
| } | |
| /* Kindle Fire HD 7" portrait */ | |
| @media only screen | |
| and (min-device-width: 800px) | |
| and (max-device-width: 1280px) | |
| and (-webkit-min-device-pixel-ratio: 1.5) | |
| and (orientation: portrait) { | |
| } | |
| /* Kindle Fire HD 7" landscape */ | |
| @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 */ | |
| @media only screen | |
| and (min-device-width: 1200px) | |
| and (max-device-width: 1600px) | |
| and (-webkit-min-device-pixel-ratio: 1.5) { | |
| } | |
| /* Kindle Fire HD 8.9" portrait */ | |
| @media only screen | |
| and (min-device-width: 1200px) | |
| and (max-device-width: 1600px) | |
| and (-webkit-min-device-pixel-ratio: 1.5) | |
| and (orientation: portrait) { | |
| } | |
| /* Kindle Fire HD 8.9" landscape */ | |
| @media only screen | |
| and (min-device-width: 1200px) | |
| and (max-device-width: 1600px) | |
| and (-webkit-min-device-pixel-ratio: 1.5) | |
| and (orientation: landscape) { | |
| } | |
| /* Laptops non-retina screens */ | |
| @media screen | |
| and (min-device-width: 1200px) | |
| and (max-device-width: 1600px) | |
| and (-webkit-min-device-pixel-ratio: 1) { | |
| } | |
| /* Laptops retina screens */ | |
| @media screen | |
| and (min-device-width: 1200px) | |
| and (max-device-width: 1600px) | |
| and (-webkit-min-device-pixel-ratio: 2) | |
| and (min-resolution: 192dpi) { | |
| } | |
| /* Apple Watch */ | |
| @media | |
| (max-device-width: 42mm) | |
| and (min-device-width: 38mm) { | |
| } | |
| /* Moto 360 Watch */ | |
| @media | |
| (max-device-width: 218px) | |
| and (max-device-height: 281px) { | |
| } |
This comment has been minimized.
This comment has been minimized.
|
max-device-height & max-device-width is deprecated |
This comment has been minimized.
This comment has been minimized.
|
Do you have the media query for Google Pixel 2 and Pixel 2 XL in portrait and landscape? As well as the placing for Galaxy S5 in landscape? Thanks! |
This comment has been minimized.
This comment has been minimized.
Media Query to target Google Pixel 2 XL /* Portrait */
@media screen
and (device-width: 412px)
and (device-height: 823px)
and (-webkit-device-pixel-ratio: 3.5)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 412px)
and (device-height: 823px)
and (-webkit-device-pixel-ratio: 3.5)
and (orientation: landscape) {
}
/* Target Portrait and Landscape */
@media screen
and (device-width: 412px)
and (device-height: 823px)
and (-webkit-device-pixel-ratio: 3.5)
and (orientation: landscape) {
} |
This comment has been minimized.
This comment has been minimized.
|
Is it possible that the browser distinguish two mobile phones that have more or less than only 1 pixel, for example, Nexus S5 3 is 412 x 732 and Pixel 2 is 411 x 731? I know it is unnecessary, but I am curious. |
This comment has been minimized.
This comment has been minimized.
|
I am facing a weird issue on google pixel 3a xl, media query doesn't work here... If anyone have the media query or fix please revert.. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
Man I want this thing for 15.6" , 11" and 21.5" devices like laptops and desktops. If possible