Created
December 31, 2017 07:11
-
-
Save mido1983/c3137bc38f4ac468a2c046a7400f6f88 to your computer and use it in GitHub Desktop.
@media for iPads
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
/* ----------- iPad 1, 2, Mini and Air ----------- */ | |
/* Portrait and Landscape */ | |
@media only screen | |
and (min-device-width: 768px) | |
and (max-device-width: 1024px) | |
and (-webkit-min-device-pixel-ratio: 1) { | |
} | |
/* Portrait */ | |
@media only screen | |
and (min-device-width: 768px) | |
and (max-device-width: 1024px) | |
and (orientation: portrait) | |
and (-webkit-min-device-pixel-ratio: 1) { | |
} | |
/* 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 3, 4 and Pro 9.7" ----------- */ | |
/* Portrait and Landscape */ | |
@media only screen | |
and (min-device-width: 768px) | |
and (max-device-width: 1024px) | |
and (-webkit-min-device-pixel-ratio: 2) { | |
} | |
/* Portrait */ | |
@media only screen | |
and (min-device-width: 768px) | |
and (max-device-width: 1024px) | |
and (orientation: portrait) | |
and (-webkit-min-device-pixel-ratio: 2) { | |
} | |
/* Landscape */ | |
@media only screen | |
and (min-device-width: 768px) | |
and (max-device-width: 1024px) | |
and (orientation: landscape) | |
and (-webkit-min-device-pixel-ratio: 2) { | |
} | |
/* ----------- iPad Pro 10.5" ----------- */ | |
/* Portrait and Landscape */ | |
@media only screen | |
and (min-device-width: 834px) | |
and (max-device-width: 1112px) | |
and (-webkit-min-device-pixel-ratio: 2) { | |
} | |
/* Portrait */ | |
/* 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) { | |
} | |
/* Landscape */ | |
/* 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) { | |
} | |
/* ----------- iPad Pro 12.9" ----------- */ | |
/* Portrait and Landscape */ | |
@media only screen | |
and (min-device-width: 1024px) | |
and (max-device-width: 1366px) | |
and (-webkit-min-device-pixel-ratio: 2) { | |
} | |
/* Portrait */ | |
/* 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) { | |
} | |
/* Landscape */ | |
/* 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) { | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment