-
-
Save ARTUR-ZH/dacd016038192f1bff4d8a5445c34f3e to your computer and use it in GitHub Desktop.
JavaScript: Detect Orientation Change on Mobile Devices
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
| // Listen for orientation changes | |
| window.addEventListener("orientationchange", function() { | |
| // Announce the new orientation number | |
| alert(window.orientation); | |
| }, false); | |
| // Listen for resize changes | |
| window.addEventListener("resize", function() { | |
| // Get screen size (inner/outerWidth, inner/outerHeight) | |
| }, false); | |
| // Find matches | |
| var mql = window.matchMedia("(orientation: portrait)"); | |
| // If there are matches, we're in portrait | |
| if(mql.matches) { | |
| // Portrait orientation | |
| } else { | |
| // Landscape orientation | |
| } | |
| // Add a media query change listener | |
| mql.addListener(function(m) { | |
| if(m.matches) { | |
| // Changed to portrait | |
| } | |
| else { | |
| // Changed to landscape | |
| } | |
| }); | |
| /* portrait */ | |
| @media screen and (orientation:portrait) { | |
| /* portrait-specific styles */ | |
| } | |
| /* landscape */ | |
| @media screen and (orientation:landscape) { | |
| /* landscape-specific styles */ | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment