/ Published in: JavaScript
While working on Mobile Web Application, We can identify orientation or apply device specific css by CSS media queries , but if you need to detect media queries from JavaScript for orientation change, you can observe and notify it with JavaScript to trigger any event or DOM manipulation:
The Key is matchMedia method, it is a part of View Module of CSSOM (CSS Object Model) still in draft mode. http://dev.w3.org/csswg/cssom/
Sources:
http://dev.w3.org/csswg/cssom-view/#the-mediaquerylist-interface
https://developer.mozilla.org/en-US/docs/DOM/window.matchMedia
http://davidwalsh.name/orientation-change
The Key is matchMedia method, it is a part of View Module of CSSOM (CSS Object Model) still in draft mode. http://dev.w3.org/csswg/cssom/
Sources:
http://dev.w3.org/csswg/cssom-view/#the-mediaquerylist-interface
https://developer.mozilla.org/en-US/docs/DOM/window.matchMedia
http://davidwalsh.name/orientation-change
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
// 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 } });