The mobile terminal uses CSS or JS to judge the explanation of horizontal screen and vertical screen

In the mobile terminal, we often encounter the problem of horizontal screen and vertical screen, so how should we judge or write different codes for horizontal screen and vertical screen?

First, add the following code to head:

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

For the above viewport tag, the following instructions are given

1) width in content refers to the width of the virtual window.

2), user-scalable=no on 1 can guarantee that the page can not be scaled? NO, some browsers don't eat this set, and another trick is minimum-scale=1. 0, maximum-scale=1. 0. The maximum and minimum scaling ratios are set to 1.0.

3), initial-scale=1. 0 Is the initial scaling controlled by user-scalable? Otherwise, some browsers will understand user-scalable as manual user scaling. If user-scalable=no, initial-scale will not take effect.

4) The mobile phone page can be touched and moved, but if it is necessary to prohibit this operation, that is, the page width is equal to the screen width, and the page just adapts to the screen to ensure that the page cannot move.

5) If the page is reduced to fit the screen width, there will be a problem. When the text box is activated (for focus), the page will be enlarged to its original size.

1: CSS judges horizontal screen and vertical screen

Written in the same CSS

@media screen and (orientation: portrait) {
 /* Vertical screen  css*/
} 
@media screen and (orientation: landscape) {
 /* Horizontal screen  css*/
}

Write separately in 2 CSS

Vertical screen

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" rel="external nofollow" >

Horizontal screen

<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" rel="external nofollow" >

2. JS judges horizontal screen and vertical screen

// Judge the horizontal and vertical screen status of the mobile phone: 
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
    if (window.orientation === 180 || window.orientation === 0) { 
      alert(' Vertical screen status! ');
    } 
    if (window.orientation === 90 || window.orientation === -90 ){ 
      alert(' Horizontal screen status! ');
    } 
  }, false); 
// Mobile browser 1 All support window.orientation This parameter can be used to judge whether the mobile phone is in a horizontal screen or a vertical screen state. 

Recently, the project has the development of electronic contract, which requires electronic signature. (Use jsignature plug-in, if you are free, write a separate experience). Sign on the small screen of the mobile phone, and the full-screen horizontal screen is the best experience. When the user opens the page vertically, he should sign and prompt the user to turn the mobile phone horizontally. This experience is too low. Programmers should consider that if they can solve it with technology, they should not bother the user (lest the user bother to call back and bite you).

Let's start with a few methods to detect the direction of the screen:

// Judge the direction of the screen 
if(window.orientation==90||window.orientation==-90){
  alert(" Horizontal screen status! ")
}
// Monitor screen direction 
window.onorientationchange = function(){ 
  switch(window.orientation){ 
    case -90: 
    case 90: 
      alert(" Horizontal screen :" + window.orientation);
    case 0: 
    case 180: 
       alert(" Vertical screen :" + window.orientation);
    break; 
  } 
} 

<!--css Media query judgment -->
@media (orientation: portrait) { }  Horizontal screen 
@media (orientation: landscape) { } Vertical screen  

Enter the webpage to check whether it is horizontal or not, and add style to canvas:

transform: rotate(90deg);

At first, I thought that the canvas canvas of jsignature could be horizontally crossed with css3transform. Who thought that the canvas was horizontally crossed, and the gestures related to touch were still vertical (sign, how to sign without strokes). If ordinary items are just displayed, the above method is enough.

Fortunately, this project is embedded in the web page app, app has the method to force the web page to cross the screen, changed the page and handed it in.

Summarize