JavaScript detection of horizontal and vertical screens of mobile devices

How to judge

A mobile device provides two objects, one attribute, and one event:

(1) It belongs to the previous attribute of the window object; there are three values: 0 is portrait, 90 is inverted to the left and turns to landscape mode, -90 is inverted to the right and turns to landscape mode, and the last 180 is inverted to the upper and lower parts of the device or the vertical pattern.

(2) orientationchange is an event that will trigger this event when the device rotates, just like the resize event used on the PC.

When these two are used together, it is easy to obtain the horizontal and vertical screen status of the device. The code is as follows:

(function(){
 var init = function(){
  var updateOrientation = function(){
   var orientation = ;
   switch(orientation){
    case 90:
    case -90:
     orientation = 'landscape';
     break;
    default:
     orientation = 'portrait';
     break;
   }

   //do something
   //For example, add a status to the html tag   //Then display different sizes according to different states   ('class',orientation);
  };

  ('orientationchange',updateOrientation,false);
  updateOrientation();
 };

 ('DOMContentLoaded',init,false);
})();

In css you can write this way:

/**Percent screen div border display blue**/
.portrait body div{
 border:1px solid blue;
}
/**Percent screen div border display yellow**/
.landscape body div{
 border:1px solid yellow;
}

Of course, you can also use media queries (recommended):

@media all and (orientation: portrait) {
 body div {
 border:1px solid blue;
 }
}
@media all and (orientation: landscape) {
 body div {
 border:1px solid yellow;
 }
}

compatibility

How to deal with the situation where the orientationchange does not exist in the device? (Generally one does not exist, the other does not exist, otherwise)

In early development, Chrome's device model mode is often used, but this property does not exist, so how can I get this value? The simple way is to judge based on the comparison of width and height. If the width is smaller than the height, it is a vertical screen, and the width and height are a horizontal screen.

I know how to get the result. The next thing is how to listen for device reversal events. Since orientationchange is not available, use the most basic resize event or use timer to detect it. Please look at the code:

(function(){
 var updateOrientation = function(){
  var orientation = ( &gt; ) ? 'landscape' : 'portrait';

  ('class',orientation);
 };

 var init = function(){

  updateOrientation();

  // Check every 5 seconds  //(updateOrientation,5000);
  
  // Listen to the resize event  ('resize',updateOrientation,false);
 };

 ('DOMContentLoaded',init,false);
})();

Finally, combining the above two methods is a complete detection solution

(function(){
 var supportOrientation = (typeof  === 'number' &amp;&amp;
   typeof  === 'object');

 var init = function(){
  var htmlNode = ,
   orientation;
  var updateOrientation = function(){
   if(supportOrientation){
    orientation = ;
    switch(orientation){
     case 90:
     case -90:
      orientation = 'landscape';
      break;
     default:
      orientation = 'portrait';
      break;
    }
   }else{
    orientation = ( &gt; ) ? 'landscape' : 'portrait';
   }
   ('class',orientation);
  };

  if(supportOrientation){
   ('orientationchange',updateOrientation,false);
  }else{
   // Listen to the resize event   ('resize',updateOrientation,false);
  }

  updateOrientation();
 };

 ('DOMContentLoaded',init,false);
})();

Summarize

Use the orientationchange event to monitor whether the device rotates, and use the attributes to determine whether it is currently horizontal or vertical screen, so that different operations can be performed.