Advanced Search

Return to Snippet

Revision: 61929
at January 24, 2013 22:20 by flamboyanz
Initial Code 
// 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
  }
});
Initial URL 
www.creativitykills.com
Initial Description 
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
Initial Title 
Screen Orientation detection - JS 1.2
Initial Tags 

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
JavaScript