About the mobile page Force vertical screen

Recently work has written a mobile page, it was nothing, but there is a request feel very strange, has not encountered before, that is, I wrote this page needs to be placed in an app, but this app is horizontal screen, Open this page webview is also horizontal screen (the latest version of the app when the vertical screen webview), originally we are using the REM layout, the state of the horizontal screen is also no problem, but party a want to open the screen when the force of this page vertical screen display. So we have the following series of operations.

The first is to determine the state of the horizontal screen, using the code:

1         functionOrient () {2             if(window.orientation = = | | window.orientation = =-90) {//Horizontal Screen3                 //ipad, iphone vertical screen, andriod horizontal screen4                 //$ ("body"). attr ("Class", "Landscape");5                 //orientation = ' landscape ';6                 //alert ("ipad, iphone vertical screen; andriod horizontal screen");7$ ("P"). Text ("Horizontal screen");8                 return false;9}Else if(window.orientation = = 0 | | window.orientation = = 180) {//Vertical ScreenTen                 //ipad, iphone horizontal screen; andriod vertical screen One //$ ("body"). attr ("Class", "Portrait"); A //orientation = ' portrait '; -                 //alert ("ipad, iphone horizontal screen; andriod vertical screen"); -$ ("P"). Text ("vertical screen")); the                 return false; -             } -         } -         //called when the page loads +$(function() { - Orient (); +         }); A         //called when the user changes the screen orientation at$ (window). On (' Orientationchange ',function(e) { -              - Orient (); -              -});

This is in the direction of monitoring the phone. However, because the opening of this app is a horizontal screen open, more with this is no way to monitor, and this also has a premise that the phone must turn on the automatic rotation is possible. so the above method has been abandoned.

　　Since the intelligent approach has been abandoned, the most cheap way is to monitor the width and height of the screen. When tall and wide, our default phone is the state of the vertical screen, when large and high, we think it is the state of the horizontal screen. (Of course, this is also limited, but considering that the new app has already solved the problem of the screen, this is the way to do it). We don't need to do anything when the state of the vertical screen. But in the horizontal screen, we are going to turn the page 90 degrees. Don't say much nonsense, look directly at the code:

　

1 //use CSS3 rotation to rotate the root container 90 degrees counterclockwise to force the user to display the vertical screen2 varDetectorient =function() {3     varwidth =Document.documentElement.clientWidth,4Height =Document.documentElement.clientHeight,5         //$wrapper = document.getElementsByTagName ("body") [0],6$wrapper = document.getElementById ("Vue"),7style = "";8     if(Width <= height) {//Horizontal Screen9 //Style + = "width:" + width + "px;"; Note the wide and high switching after rotationTen //style + = "Height:" + height + "px;"; One //style + = "-webkit-transform:rotate (0); Transform:rotate (0); "; A //style + = "-webkit-transform-origin:0 0;"; - //style + = "transform-origin:0 0;"; -Style + = "Font-size:" + (Width * 100/1125) + "px"; the         varHtml_doc = document.getElementsByTagName ("html") [0]; -Html_doc.style.cssText = "Font-size:" + (Width * 100/1125) + "px"; -}Else{//Vertical Screen -Style + = "width:" + height + "px;"; +Style + = "Min-height:" + width + "px;"; -Style + = "-webkit-transform:rotate ( -90deg); Transform:rotate ( -90deg); "; +         //attention to the processing of the rotation midpoint AStyle + = "-webkit-transform-origin:" + HEIGHT/2 + "px" + (HEIGHT/2) + "PX;"; atStyle + = "Transform-origin:" + HEIGHT/2 + "px" + (HEIGHT/2) + "PX;"; -         //style + = "Font-size:" + height * 100/1125 + "px;"; -         //$ ("html"). CSS ({"Font-size":(height * 100/1125), "overflow-y": "Hidden"}); -         varHtml_doc = document.getElementsByTagName ("html") [0]; -Html_doc.style.cssText = "Font-size:" + height * 100/1125 + "px;" + "overflow-y:" + "hidden;" + "Height:" +height+ "PX;"; -Style + = "overflow-y: hidden;"; in Add_tab (); -$wrapper. Style.csstext =style; to     } +      -      the } *Window.onresize =detectorient; $ detectorient ();Panax Notoginseng  - functionAdd_tab () { the     varClone_tab = $ ("Footer"). Clone (); +$ ("Footer"). Remove (); AClone_tab.css ({"Transform": "Rotate ( -90deg)", "Transform-origin": "Top Right"}) the$ ("Body"). Append (Clone_tab); +Clone_tab.css ({"Position": "Fixed", "right": "1.77rem", "Bottom": "4rem", "Left": "Auto", "Top": "0", "width": "11.25rem" , "height": "1.77rem"}) -}

I believe this code is not very difficult for front-end people, but there are three points to note.

1th:

At the beginning I was to facilitate the direct rotation of the entire HTML, this is the time there will be a problem, that is, the fixed positioning element of the page, the positioning is not used (<footer> in the Code is as tab switch on the bottom); Here is a Zhang Xin Asahi great God article, This requires us to change, since the rotation of the parent element, the child element is no use, then we do not rotate the parent element, the direct rotation of his brother element can be. I'm here to rotate an element called #vue, because the rest of the content in my page is all in this div. So I rotated this element. Then this time the positioning is available, but the style is not correct, so in my add_tab this function is to adjust the size and style of this element, so that he can normally display on the right side of the screen, that is, the state of the vertical screen, the bottom of the screen.

2nd:

The 2nd point to note is that I should use the REM layout, more so I will change the HTML font-size, but this time to be careful, when we rotate over, the width becomes high, the height becomes wide, so we need to use height to calculate the root directory font size.

3rd:

The 3rd is noted in the program, we need to pay attention to the center of rotation, the default rotation center is at the center point of the selected element. Much as we want to change the center point of rotation. Overflow-y:hidden the HTML after the rotation. Otherwise, there will be extra scrolling.

In this case, the entire page is basically rotated, and the fixed positioned element of the bottom is positioned again successfully. Fortunately, we use the pop-up window is the Layui of the window, and then the pop-up window 90 degrees can be rotated.

PS: Finally found a little problem is no way to solve, that is, when the page is long enough, that is, when the scroll bar, after the pop-up window, sliding behind the mask layer, the back of the page will slide upward. This can be solved, I above this article is the use of fixed positioning solution, but because of rotation, this failure, so there is no good way. Attach a link to my last article. In the vertical state of the screen is no problem.