Posted By

flamboyanz on 01/24/13


Tagged

screen orientataion


Versions (?)

Screen Orientation detection - JS 1.2


 / Published in: JavaScript
 

URL: www.creativitykills.com

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

  1. // If there are matches, we're in portrait
  2. if(mql.matches) {
  3. // Portrait orientation
  4. } else {
  5. // Landscape orientation
  6. }
  7.  
  8. // Add a media query change listener
  9. mql.addListener(function(m) {
  10. if(m.matches) {
  11. // Changed to portrait
  12. }
  13. else {
  14. // Changed to landscape
  15. }
  16. });

Report this snippet  

You need to login to post a comment.