On mobile terminals, we often encounter the problem of horizontal and vertical screens. So how should we judge or write different codes for horizontal and vertical screens?
First add the following code to the head:
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
The following description is given for the above viewport tags
1) The width in the content refers to the width of the virtual window.
2) Does user-scalable=no guarantee that the page cannot be scaled? NO. Some browsers don’t use this set, and another trick is to set minimum-scale=1.0, maximum-scale=1.0. Just set the maximum and minimum scaling ratios to 1.0.
3) Is initial-scale=1.0 Is the initial scalable controlled by user-scalable? Not necessarily, some browsers will understand user-scalable as user-scalable manually. If user-scalable=no, initial-scale will not take effect.
4) The mobile page can be touched and moved, but if you need to prohibit this operation, it means that the page width is equal to the screen width, so that the page just fits the screen, so that the page cannot move.
5) If the page is reduced to adapt to the screen width, a problem will occur. When the text box is activated (get focus), the page will be enlarged to its original size.
1: CSS judges horizontal and vertical screens
Written in the same CSS
@media screen and (orientation: portrait) {
/*Perpendicular screen css*/
}
@media screen and (orientation: landscape) {
/*Handwidth screen css*/
}
Write it separately in 2 CSS
Vertical screen
<link rel="stylesheet" media="all and (orientation:portrait)" href="" rel="external nofollow" >
Horizontal screen
<link rel="stylesheet" media="all and (orientation:landscape)" href="" rel="external nofollow" >
2. JS judges horizontal and vertical screens
//Judge the horizontal and vertical screen status of the phone:("onorientationchange" in window ? "orientationchange" : "resize", function() {
if ( === 180 || === 0) {
alert('Perpendicular screen status! ');
}
if ( === 90 || === -90 ){
alert('Handwidth screen status! ');
}
}, false);
//Mobile browsers generally support this parameter，Through this parameter, we can tell whether the phone is in a horizontal or vertical screen state。
Recently, the project has been developed in electronic contracts and requires electronic signature (using the jsignature plug-in, if you have time, write your own experience after using it). Sign on the small screen of your phone, and full-screen horizontal screen is the best experience. When the user opens the page with a vertical screen, he should sign it and prompt the user to turn the phone horizontally. This experience is too low. Programmers should consider that if they can be solved with technology, don’t bother the user (not to let the user go back and call you and bite you).
Let’s first look at the screen direction:
//Judge the screen directionif(==90||==-90){
alert("Horizontal screen status!")
}
//Sign up the screen direction = function(){
switch(){
case -90:
case 90:
alert("Horizontal Screen:" + );
case 0:
case 180:
alert("Perpendicular:" + );
break;
}
}
<!--cssMedia query judgment-->
@media (orientation: portrait) { } Horizontal screen
@media (orientation: landscape) { }Vertical screen
Enter the web page to check whether the horizontal screen state is, or add style to canvas:
transform: rotate(90deg);
The initial idea was to use css3transform to cross the canvas of jsignature. Who would have thought that the horizontal canvas is coming, and the touch-related gestures are still vertical (signature, how to sign the strokes without the hand). If it is a normal item and is only displayed, the above method is enough.
Fortunately, this project is embedded in the web page app. The app has a method to force the web page to screen horizontally, and then change the page and hand it over.
Summarize
The above is the entire content of this article. I hope that the content of this article has certain reference value for your study or work. Thank you for your support. If you want to know more about it, please see the relevant links below