Last active
December 3, 2018 08:04
-
-
Save M-O-Z-G/e75442a4f19f0e8462f942a316820d1a to your computer and use it in GitHub Desktop.
Media query for mobile devices [Stylus Mixin]
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
// | |
// 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