JavaScript detection mobile device _javascript tips

How to judge

The mobile device provides two objects, a property, an event:

(1) Window.orientation belongs to a property on the Window object, a total of three values: 0 for vertical screen mode (portrait), 90 for left reverse to horizontal screen mode (landscape), and 90 for right reverse to horizontal screen mode (landscape) , the last 180 is the device up or down switch or the vertical screen mode.

(2) Orientationchange is an event that triggers this event when the device rotates, as is the resize event used on the PC.

These two are used together, it is easy to get the screen state of the device, the code is as follows:

(function () {
 var init = function () {var
  updateorientation = function () {var
   orientation = window.orientation;
   Switch (orientation) {case
    :
    case-90:
     orientation = ' landscape ';
     break;
    Default:
     orientation = ' portrait ';
     break;

   Do something//
   For example, add a status to the HTML tag
   //Then display different sizes
   document.body.parentNode.setAttribute (' class ', depending on the state) orientation);
  };

  Window.addeventlistener (' Orientationchange ', updateorientation,false);
  Updateorientation ();
 };

 Window.addeventlistener (' domcontentloaded ', init,false);
} ();

You can write this in CSS:

The/** vertical div border Displays the blue **/
. Portrait body div{
 border:1px solid blue
;
The/** vertical div border Displays the yellow **/
. Landscape body div{
 border:1px solid;

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

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

Compatibility

What if window.orientation or Orientationchange does not exist in the device? (General one does not exist, the other does not exist, and vice versa)

In the prophase development, often will use the Chrome device model mode, but this attribute does not exist, how to obtain this value? The simple way is based on wide and high size comparison judgment, width is less than high for the vertical screen, wide and high is horizontal screen.

The way to get the results know, the next is how to monitor the device reversal event, since Orientationchange is not available, use the most basic resize event or use timer detection, or look at the code:

(function () {
 var updateorientation = function () {
  var orientation = (Window.innerwidth > Window.innerheight) ? ' Landscape ': ' Portrait ';

  Document.body.parentNode.setAttribute (' class ', orientation);

 var init = function () {

  updateorientation ();

  Check
  //window.setinterval (updateorientation,5000) once every 5 seconds;
  
  Monitor Resize Event
  window.addeventlistener (' resize ', updateorientation,false);

 Window.addeventlistener (' domcontentloaded ', init,false);
} ();

Finally, the above two methods together, is a complete test solution

 (function () {var supportorientation = (typeof window.orientation = = ' Number ' &&

 typeof Window.onorientationchange = = = ' object ');
  var init = function () {var htmlnode = document.body.parentNode, orientation;
    var updateorientation = function () {if (supportorientation) {orientation = window.orientation;
      Switch (orientation) {Case 90:case-90:orientation = ' landscape ';
     Break
      default:orientation = ' Portrait ';
    Break }}else{orientation = (Window.innerwidth > Window.innerheight)?
   ' Landscape ': ' Portrait ';
  } htmlnode.setattribute (' class ', orientation);

  };
  if (supportorientation) {window.addeventlistener (' Orientationchange ', updateorientation,false);
  }else{//Monitor Resize event window.addeventlistener (' Resize ', updateorientation,false);
 } updateorientation ();

 };
Window.addeventlistener (' domcontentloaded ', init,false);
})(); 

Summarize

The Orientationchange event is used to listen for the device to rotate, and to determine whether the current is a horizontal or vertical screen with the Window.orientation property in order to perform a different operation.