-
-
Save matthewcrist/2295149 to your computer and use it in GitHub Desktop.
Targeting tablets with media queries, but not tripping those queries on the desktop
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
| <!-- The breakpoint widths below are from a specific client project and probably should be moved to standard 320/460/768 breakpoints in other usage --> | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> | |
| <style> | |
| body {color: #333; background-color: #eee; font-family: 'Georgia';} | |
| .hidden { display: none; text-indent: 3em;} | |
| @media screen and (max-width: 653px) { | |
| .maxw_653 {display: block} | |
| } | |
| @media screen and (max-height: 1024px) { | |
| .max_1024 {display: block} | |
| } | |
| @media screen and (min-width: 654px) { | |
| .minw_654 {display: block} | |
| } | |
| @media screen and (min-width: 990px) and (max-device-height: 800px), screen and (min-width: 990px) and (max-device-height: 1024px) and (device-aspect-ratio: 3/4) { | |
| /* The second part of the above media query select the iPhone */ | |
| .minw_990_maxh_1024 {display: block} | |
| body {background-color: purple;} | |
| } | |
| @media screen and (min-width: 990px) and (min-device-height: 801px) and (min-device-aspect-ratio: 1/1) { | |
| .minw_990_minh_1025 {display: block} | |
| body {background-color: orange;} | |
| } | |
| @media screen and (min-width: 990px) { | |
| .minw_990 {display: block} | |
| } | |
| @media screen and (orientation: landscape) { | |
| .landscape {display: block} | |
| } | |
| @media (orientation: portrait) { | |
| .portrait {display: block} | |
| } | |
| #output {margin: 1em; padding: 1em; border-radius: 1em; border: 1px solid #999;} | |
| </style> | |
| </head> | |
| <body> | |
| <p>This is a testbed for the current breakpoints use in the client site</p> | |
| <div class="breakpoints"> | |
| <p>Currently active breakpoints:</p> | |
| <p>Hello Tim</p> | |
| <div class="maxw_653 hidden">@media screen and (max-width: 653px): all mobile </div> | |
| <div class="maxh_1024 hidden">@media screen and (max-height: 1024px): mobile and tablet </div> | |
| <div class="minw_654 hidden">@media screen and (min-width: 654px): tablet portrait</div> | |
| <div class="minw_990_maxh_1024 hidden">@media screen and (min-width: 990px) and (max-device-height: 800px), screen and (min-width: 990px) and (max-device-height: 1024px) and (device-aspect-ratio: 3/4): tablet landscape</div> | |
| <div class="minw_990_minh_1025 hidden">@media screen and (min-width: 990px) and (min-device-height: 801px) and (min-device-aspect-ratio: 1/1): bigger than tablet</div> | |
| <div class="minw_990 hidden">@media screen and (min-width: 990px): tablet landscape and up</div> | |
| <div class="landscape hidden">@media screen and (orientation: landscape)</div> | |
| <div class="portrait hidden">@media screen and (orientation: portrait)</div> | |
| </div> | |
| <div id="output"> | |
| </div> | |
| <script> | |
| output = document.getElementById('output'); | |
| if (window.orientation != undefined) { | |
| orient = document.createElement("span"); | |
| orient.id = 'orient'; | |
| orient.innerHTML = "Current orientation: " + window.orientation; | |
| output.appendChild(orient); | |
| document.addEventListener('orientationchange', function (e) { | |
| console.log(window.orientation); | |
| orient.innerHTML = "Current orientation (in degrees): " + window.orientation; | |
| }, false); | |
| } else { | |
| output.innerHTML = "Device orientation not available on this device" | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Now with 100% less !important.