-
-
Save kiogo/aab31174aad247b52120134c683f5d5d to your computer and use it in GitHub Desktop.
@media for iPads
This file contains hidden or 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