Skip to content

Instantly share code, notes, and snippets.

@M-O-Z-G
Last active December 3, 2018 08:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save M-O-Z-G/e75442a4f19f0e8462f942a316820d1a to your computer and use it in GitHub Desktop.
Save M-O-Z-G/e75442a4f19f0e8462f942a316820d1a to your computer and use it in GitHub Desktop.
Media query for mobile devices [Stylus Mixin]
//
// Media query for mobile devices
//
// SHORTNAME ......... DEVICE NAME
//
// AW ................ Apple Watch
// GF2 ............... Galaxy S2
// GF3 ............... Galaxy S3
// GS4-5-N3 .......... Galaxy S4, S5, Note 3
// GS5 ............... Galaxy S5
// GS6 ............... Galaxy S6
// GT2 ............... Galaxy Tab 2
// GTS ............... Galaxy Tab S
// GP ................ Google Pixel
// GPXL .............. Google Pixel XL
// HTC1 .............. HTC One
// iPad1-2-M-A ....... iPad 1, 2, Mini and Air
// iPad3-4-P9 ........ iPad 3, 4 and Pro 9.7"
// iPadP10 ........... iPad Pro 10.5"
// iPadP12 ........... iPad Pro 12.9"
// iPhone4-4S ........ iPhone 4 and 4S
// iPhone5-5S-5C-5SE . iPhone 5 and 5S and 5C and 5SE
// iPhone6-6S-7-8 .... iPhone 6 and 6S and 7 and 8
// iPhone6+7+8+ ...... iPhone 6+ and 7+ and 8+
// iPhoneX ........... iPhone X
// KFHD7 ............. Kindle Fire HD 7"
// KFHD8 ............. Kindle Fire HD 8.9"
// NRS ............... Non-Retina Screens
// RS ................ Retina Screens
// M360W ............. Moto 360 Watch
// N4 ................ Nexus 4
// N5 ................ Nexus 5
// N7 ................ Nexus 7
// N9 ................ Nexus 9
// WP ................ Windows Phone
// HAP6 .............. Huawei Ascend P6
// HAP7 .............. Huawei Ascend P7
// 1+1 .............. OnePlus One
//
_media-device(deviceID = null, orient = null) {
if (deviceID == 'AW') {
/* ----------- Apple Watch ----------- */
@media (max-device-width: 42mm) and (min-device-width: 38mm) {
{block};
}
} else if (deviceID == 'GS2') {
/* ----------- Galaxy S2 ----------- */
if (orient == p) {
@media screen,
(device-width: 320px),
(device-height: 534px),
(-webkit-device-pixel-ratio: 1.5),
(orientation: portrait) {
{block};
}
} else if (orient == l) {
@media screen,
(device-width: 320px),
(device-height: 534px),
(-webkit-device-pixel-ratio: 1.5),
(orientation: landscape) {
{block};
}
} else {
@media screen,
(device-width: 320px),
(device-height: 534px),
(-webkit-device-pixel-ratio: 1.5) {
{block};
}
}
} else if (deviceID == 'GS3') {
/* ----------- Galaxy S3 ----------- */
if (orient == p) {
@media screen,
(device-width: 320px),
(device-height: 640px),
(-webkit-device-pixel-ratio: 2),
(orientation: portrait) {
{block};
}
} else if (orient == l) {
@media screen,
(device-width: 320px),
(device-height: 640px),
(-webkit-device-pixel-ratio: 2),
(orientation: landscape) {
{block};
}
} else {
@media screen,
(device-width: 320px),
(device-height: 640px),
(-webkit-device-pixel-ratio: 2) {
{block};
}
}
} else if (deviceID == 'GS4-5-N3') {
/* ----------- Galaxy S4, S5, Note 3 ----------- */
if (orient == p) {
@media screen,
(device-width: 320px),
(device-height: 640px),
(-webkit-device-pixel-ratio: 3),
(orientation: portrait) {
{block};
}
} else if (orient == l) {
@media screen,
(device-width: 320px),
(device-height: 640px),
(-webkit-device-pixel-ratio: 3),
(orientation: landscape) {
{block};
}
} else {
@media screen,
(device-width: 320px),
(device-height: 640px),
(-webkit-device-pixel-ratio: 3) {
{block};
}
}
} else if (deviceID == 'GS6') {
/* ----------- Galaxy S6 ----------- */
if (orient == p) {
@media screen,
(device-width: 360px),
(device-height: 640px),
(-webkit-device-pixel-ratio: 4),
(orientation: portrait) {
{block};
}
} else if (orient == l) {
@media screen,
(device-width: 360px),
(device-height: 640px),
(-webkit-device-pixel-ratio: 4),
(orientation: landscape) {
{block};
}
} else {
@media screen,
(device-width: 360px),
(device-height: 640px),
(-webkit-device-pixel-ratio: 4) {
{block};
}
}
} else if (deviceID == 'GT2') {
/* ----------- Galaxy Tab 2 ----------- */
if (orient == p) {
@media (max-device-width: 800px) and (orientation: portrait) {
{block};
}
} else if (orient == l) {
@media (max-device-width: 1280px) and (orientation: landscape) {
{block};
}
} else {
@media (min-device-width: 800px) and (max-device-width: 1280px) {
{block};
}
}
} else if (deviceID == 'GTS') {
/* ----------- Galaxy Tab S ----------- */
if (orient == p) {
@media (max-device-width: 800px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
{block};
}
} else if (orient == l) {
@media (max-device-width: 1280px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
{block};
}
} else {
@media (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 2) {
{block};
}
}
} else if (deviceID == 'GP') {
/* ----------- Google Pixel ----------- */
if (orient == p) {
@media screen,
(device-width: 360px),
(device-height: 640px),
(-webkit-device-pixel-ratio: 3),
(orientation: portrait) {
{block};
}
} else if (orient == l) {
@media screen,
(device-width: 360px),
(device-height: 640px),
(-webkit-device-pixel-ratio: 3),
(orientation: landscape) {
{block};
}
} else {
@media screen,
(device-width: 360px),
(device-height: 640px),
(-webkit-device-pixel-ratio: 3) {
{block};
}
}
} else if (deviceID == 'GPXL') {
/* ----------- Google Pixel XL ----------- */
if (orient == p) {
@media screen,
(device-width: 360px),
(device-height: 640px),
(-webkit-device-pixel-ratio: 4),
(orientation: portrait) {
{block};
}
} else if (orient == l) {
@media screen,
(device-width: 360px),
(device-height: 640px),
(-webkit-device-pixel-ratio: 4),
(orientation: landscape) {
{block};
}
} else {
@media screen,
(device-width: 360px),
(device-height: 640px),
(-webkit-device-pixel-ratio: 4) {
{block};
}
}
} else if (deviceID == 'HTC1' || deviceID == '1+1' || deviceID == 'GS5') {
/* ----------- HTC One or OnePlus One or Samsung Galaxy S5 ----------- */
if (orient == p) {
@media screen,
(device-width: 360px),
(device-height: 640px),
(-webkit-device-pixel-ratio: 3),
(orientation: portrait) {
{block};
}
} else if (orient == l) {
@media screen,
(device-width: 360px),
(device-height: 640px),
(-webkit-device-pixel-ratio: 3),
(orientation: landscape) {
{block};
}
} else {
@media screen,
(device-width: 360px),
(device-height: 640px),
(-webkit-device-pixel-ratio: 3) {
{block};
}
}
} else if (deviceID == 'iPad1-2-M-A') {
/* ----------- iPad 1, 2, Mini and Air ----------- */
if (orient == p) {
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
{block};
}
} else if (orient == l) {
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
{block};
}
} else {
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
{block};
}
}
} else if (deviceID == 'iPad3-4-P9') {
/* ----------- iPad 3, 4 and Pro 9.7" ----------- */
if (orient == p) {
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
{block};
}
} else if (orient == l) {
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
{block};
}
} else {
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
{block};
}
}
} else if (deviceID == 'iPadP10') {
/* ----------- iPad Pro 10.5" ----------- */
if (orient == p) {
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen and (min-device-width: 834px) and (max-device-width: 834px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
{block};
}
} else if (orient == l) {
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen and (min-device-width: 1112px) and (max-device-width: 1112px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
{block};
}
} else {
@media only screen and (min-device-width: 834px) and (max-device-width: 1112px) and (-webkit-min-device-pixel-ratio: 2) {
{block};
}
}
} else if (deviceID == 'iPadP12') {
/* ----------- iPad Pro 12.9" ----------- */
if (orient == p) {
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen and (min-device-width: 1024px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
{block};
}
} else if (orient == l) {
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen and (min-device-width: 1366px) and (max-device-width: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
{block};
}
} else {
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {
{block};
}
}
} else if (deviceID == 'iPhone4-4S') {
/* ----------- iPhone 4 and 4S ----------- */
if (orient == p) {
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
{block};
}
} else if (orient == l) {
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
{block};
}
} else {
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
{block};
}
}
} else if (deviceID == 'iPhone5-5S-5C-5SE') {
/* ----------- iPhone 5 and 5S and 5C and 5SE ----------- */
if (orient == p) {
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
{block};
}
} else if (orient == l) {
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
{block};
}
} else {
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {
{block};
}
}
} else if (deviceID == 'iPhone6-6S-7-8') {
/* ----------- iPhone 6 and 6S and 7 and 8 ----------- */
if (orient == p) {
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
{block};
}
} else if (orient == l) {
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
{block};
}
} else {
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
{block};
}
}
} else if (deviceID == 'iPhone6+7+8+') {
/* ----------- iPhone 6+ and 7+ and 8+ ----------- */
if (orient == p) {
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
{block};
}
} else if (orient == l) {
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
{block};
}
} else {
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {
{block};
}
}
} else if (deviceID == 'iPhoneX') {
/* ----------- iPhone X ----------- */
if (orient == p) {
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
{block};
}
} else if (orient == l) {
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
{block};
}
} else {
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) {
{block};
}
}
} else if (deviceID == 'KFHD7') {
/* ----------- Kindle Fire HD 7" ----------- */
if (orient == p) {
@media only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait) {
{block};
}
} else if (orient == l) {
@media only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: landscape) {
{block};
}
} else {
@media only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) {
{block};
}
}
} else if (deviceID == 'KFHD8') {
/* ----------- Kindle Fire HD 8.9" ----------- */
if (orient == p) {
@media only screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait) {
{block};
}
} else if (orient == l) {
@media only screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: landscape) {
{block};
}
} else {
@media only screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1.5) {
{block};
}
}
} else if (deviceID == 'NRS') {
/* ----------- Non-Retina Screens ----------- */
@media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) {
{block};
}
} else if (deviceID == 'RS') {
/* ----------- 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) {
{block};
}
} else if (deviceID == 'M360W') {
/* ----------- Moto 360 Watch ----------- */
@media (max-device-width: 218px) and (max-device-height: 281px) {
{block};
}
} else if (deviceID == 'N4') {
/* ----------- Nexus 4 ----------- */
if (orient == p) {
@media screen and (device-width: 384px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait) {
{block};
}
} else if (orient == l) {
@media screen and (device-width: 384px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape) {
{block};
}
} else {
@media screen and (device-width: 384px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 2) {
{block};
}
}
} else if (deviceID == 'N5') {
/* ----------- Nexus 5 ----------- */
if (orient == p) {
@media screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {
{block};
}
} else if (orient == l) {
@media screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) {
{block};
}
} else {
@media screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) {
{block};
}
}
} else if (deviceID == 'N7') {
/* ----------- Nexus 7 ----------- */
if (orient == p) {
@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) {
{block};
}
} else if (orient == l) {
@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) {
{block};
}
} else {
@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) {
{block};
}
}
} else if (deviceID == 'N9') {
/* ----------- Nexus 9 ----------- */
if (orient == p) {
@media screen and (device-width: 1536px) and (device-height: 2048px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) and (orientation: portrait) {
{block};
}
} else if (orient == l) {
@media screen and (device-width: 1536px) and (device-height: 2048px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) and (orientation: landscape) {
{block};
}
} else {
@media screen and (device-width: 1536px) and (device-height: 2048px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) {
{block};
}
}
} else if (deviceID == 'WP') {
/* ----------- Windows Phone ----------- */
if (orient == p) {
@media screen and (device-width: 480px) and (device-height: 800px) and (orientation: portrait) {
{block};
}
} else if (orient == l) {
@media screen and (device-width: 480px) and (device-height: 800px) and (orientation: landscape) {
{block};
}
} else {
@media screen and (device-width: 480px) and (device-height: 800px) {
{block};
}
}
} else if (deviceID == 'HAP6') {
/* ----------- Huawei Ascend P6 ----------- */
if (orient == p) {
@media screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait) {
{block};
}
} else if (orient == l) {
@media screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape) {
{block};
}
} else {
@media screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 2) {
{block};
}
}
} else if (deviceID == 'HAP7') {
/* ----------- Huawei Ascend P7 ----------- */
if (orient == p) {
@media screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {
{block};
}
} else if (orient == l) {
@media screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) {
{block};
}
}
} else {
/* ----------- Default Mobile Device ----------- */
{block};
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment