Js/css detect changes in the direction of mobile devices judging the screen

Recently done the site is to be able to access the Computer Browser, ipad and can access, the ipad is divided into several, and the difference between the screen, there are many things to consider. Here are some code that distinguishes the screen from the bottom.

Method One: Use the event that triggers the switch between the phone's horizontal screen and the vertical screen

Window.addeventlistener ("Orientationchange", function () {    //announces the new direction of the value    alert (window.orientation);    

　　

Method Two: Monitor the adjustment size change

/* Portrait *    /@media screen and (orientation:portrait) {/    * portrait-specific styles */    }/    * landscape *    /@media screen and (Orientation:landscape) {/    * landscape-specific styles */    }  

　　

CSS Judging screen

/* Portrait *    /@media screen and (orientation:portrait) {/    * portrait-specific styles */}/*    Landscape * /    @media screen and (Orientation:landscape) {/    * landscape-specific styles */    }  

　　

The local Window.matchmedia method allows real-time media queries. We can use the above media query to find out if we are in an upright or horizontal perspective:

var mql = Window.matchmedia ("(orientation:portrait)");//If there is a match, then we are in Vertical view if (mql.matches) {  //Upright Direction alert ("1")} else {  //Horizontal alert ("2")}  //Add a media query to change listener mql.addlistener (function (m) {if (m.matches) {// Change to upright direction document.getElementById ("test"). Innerhtml= "Change to Upright direction";} else {document.getElementById ("test"). Innerhtml= "Change to horizontal direction";//change to horizontal direction});

　　

Js/css detect changes in the direction of mobile devices judging the screen