Last active
April 4, 2024 23:23
-
-
Save needim/d15fdc2ac133d8078f7c to your computer and use it in GitHub Desktop.
Device Specific CSS Media Queries Collection
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
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) { | |
} |
max-device-height & max-device-width is deprecated
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!
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!
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) {
}
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.
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
Man I want this thing for 15.6" , 11" and 21.5" devices like laptops and desktops. If possible