Recently, I wrote a mobile page at work. It was nothing at first, but there was a requirement that seemed very strange. I had never encountered it before. The page I wrote needed to be placed in an APP, but the APP was in landscape orientation. , the webview that opens this page is also in horizontal screen (the latest version of the APP opens in vertical screen webview), originally we used the rem layout, and there is no problem in the horizontal screen state, but Party A hopes to use the horizontal screen in the horizontal screen. Force this page to display vertically when the screen is open. So there is the following series of operations.
The first is to determine the status of the horizontal screen, using the following code:
function orient() { if(window.orientation == 90 || window.orientation == -90) {//horizontal screen//ipad, iphone vertical screen; Andriod horizontal screen//$(body).attr(class, landscape); //orientation = 'landscape'; //alert(ipad, iphone vertical screen; Andriod horizontal screen); $(p).text(horizontal screen); return false; } else if(window.orientation == 0 || window.orientation == 180) {//Vertical screen//ipad, iphone horizontal screen; Android vertical screen// $(body).attr(class, portrait);// orientation = 'portrait'; //alert(ipad, iphone horizontal screen; Andriod vertical screen); $(p).text(vertical screen); return false; } } //Called when the page loads $(function() { orient(); }); //Called when the user changes the screen orientation $(window).on('orientationchange', function(e) { orient(); });This is monitoring the direction of the mobile phone. However, because the APP is opened horizontally, it is usually impossible to detect this, and a prerequisite for this is that the phone must have automatic rotation turned on. So the above method was abandoned.
Since the smart method has been abandoned, the cheapest method is to monitor the width and height of the screen. When the height is greater than the width, we default to the vertical screen state of the phone. When the width is greater than the height, we consider the phone to be in the horizontal screen state. (Of course, this also has limitations, but considering that the new APP has solved the problem of horizontal and vertical screens, we will just do it here). We don’t need to do anything when the screen is in portrait mode. But in landscape mode, we have to rotate the page 90 degrees. Without further ado, let’s look directly at the code:
//Use CSS3 rotation to rotate the root container 90 degrees counterclockwise to force the user to display it vertically var detectOrient = function() { var width = document.documentElement.clientWidth, height = document.documentElement.clientHeight, //$wrapper = document. getElementsByTagName(body)[0], $wrapper = document.getElementById(vue), style = ; if(width <= height) { // Horizontal screen // style += width: + width + px;; // Pay attention to the width and height switching after rotation // style += height: + height + px;;// style += -webkit- transform: rotate(0); transform: rotate(0);;// style += -webkit-transform-origin: 0 0;;// style += transform-origin: 0 0;; style += font-size : + (width * 100 / 1125) + px; var html_doc = document.getElementsByTagName(html)[0]; html_doc.style.cssText = font-size: + (width * 100 / 1125) + px; } else { // Vertical style += width: + height + px;; style += min-height: + width + px;; style += -webkit-transform: rotate(-90deg); transform: rotate(-90deg);; // Pay attention to the handling of the rotation midpoint style += -webkit-transform-origin: + height / 2 + px + (height / 2) + px;; style += 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}); var html_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;; add_tab(); $wrapper.style.cssText = style; } }window.onresize = detectOrient;detectOrient() ;function add_tab(){ var clone_tab = $(footer).clone(); $(footer).remove(); clone_tab.css({transform:rotate(-90deg),transform-origin:top right}) $(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 difficult for front-end personnel, but there are three points that need to be noted.
First point:
At the beginning, I directly rotated the entire html for convenience. At this time, there will be a problem, that is, the positioning of fixed positioned elements in the page will not work (the <footer> in the code is placed as a tab switch. bottom); we need to change this. Since rotating the parent element will not work on the child elements, then we don't need to rotate the parent element, just rotate its sibling elements directly. Here I am rotating an element called #vue, because all other content on my page is in this div. So I just rotated the element. Then positioning can be used at this time, but the style is wrong, so in my add_tab function, I adjust the size and style of this element so that it can be displayed normally on the right side of the screen, that is, in portrait mode. , the bottom of the screen.
Second point:
The second thing to note is that because I use the rem layout, I will change the font-size of the html, but be careful at this time. When we rotate it, the width becomes height and the height becomes becomes width, so we need to use height to calculate the font size of the root directory.
The third point:
The third point is noted in the program. We need to pay attention to the center of rotation. The default center of rotation is the center point of the selected element. Now we want to change the center point of rotation. After rotation, you also need to overflow-y:hidden the html. Otherwise there will be unnecessary scrolling.
In this case, the entire page is basically rotated, and the fixed positioned elements at the bottom are successfully positioned again. Fortunately, the pop-up window we use is the pop-up window of layui, and then we can rotate the pop-up window 90 degrees.
ps: Finally, I found a problem that cannot be solved. When the page is long enough, that is, when there is a scroll bar, after the pop-up window comes out, if you slide the mask layer behind it, the subsequent pages will slide up. This could have been solved originally. The article above was solved by using fixed positioning, but because of the rotation, this failed, so there is no good way. There is no problem in portrait mode.
The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.