How to force vertical screen on mobile pages

I recently wrote a mobile page at work, which was originally nothing special, but there was a requirement that felt very strange and I had never encountered it before, that is, the page I wrote needs to be placed in an APP, but this APP is in landscape mode, and the webview that opens this page is also in landscape mode (the latest version of the APP is in portrait mode when opened). Originally we used the rem layout, and there was no problem in landscape mode, but the client hopes to force the page to be displayed in portrait mode when opened in landscape mode. So there is the following series of operations.

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

function orient() {
            if(window.orientation == 90 || window.orientation == -90) {//horizontal screen//ipad, iphone vertical screen; Android horizontal screen//$("body").attr("class", "landscape");
                //orientation = 'landscape';
                //alert("ipad, iphone vertical screen; Android 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; Android vertical screen");
                $("p").text("Vertical screen");
                return false;
            }
        }
        //Call when the page loads$(function() {
            orient();
        });
        //Called when the user changes the screen orientation$(window).on('orientationchange', function(e) {
            
            orient();
            
        });

This is to monitor the direction of the phone. However, because the APP is opened in landscape mode, this cannot be detected. In addition, the prerequisite is that the phone must have automatic rotation turned on. So the above method was abandoned.

Since the intelligent 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 assume that the phone is in portrait mode. When the width is greater than the height, we assume that it is in landscape mode. (Of course this also has limitations, but considering that the problem of horizontal and vertical screens has been solved in the new APP, we will do it this way 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 at the code:

// Use CSS3 rotation to rotate the root container 90 degrees counterclockwise to force the user to display the screen 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;"; // Note 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 screen style += "width:" + height + "px;";
        style += "min-height:" + width + "px;";
        style += "-webkit-transform: rotate(-90deg); transform: rotate(-90deg);";
        // Pay attention to the processing of the midpoint of the rotation 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 very difficult for front-end personnel, but there are three points that need to be noted.

First point:

At the beginning, I rotated the entire HTML for convenience. But there was a problem. The positioning of the fixed elements in the page was no longer effective (the <footer> in the code is placed at the bottom as a tab switch). We need to change this. Since rotating the parent element will not work for the child elements, we should not rotate the parent element, but directly rotate its sibling elements. Here I am rotating an element called #vue, because all other content in my page is in this div. So I rotated this element. Then the 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, at the bottom of the screen in portrait mode.

Second point:

The second point to note is that because I use rem layout, I will usually change the font-size of html, but be careful at this time. When we rotate it, the width becomes the height and the height becomes the width, so we need to use the height to calculate the font size of the root directory.

Third point:

The third point is noted in the program, which requires us to pay attention to the center of rotation. The default rotation center is the center point of the selected element. Most of the time we want to change the center point of rotation. After rotation, you also need to set HTML's overflow-y: hidden. Otherwise there will be unnecessary scrolling.

In this way, the entire page is basically rotated, and the fixed positioned element at the bottom is successfully positioned again. Fortunately, the pop-up window we used was the layui pop-up window, and we just needed to rotate it 90 degrees.

ps: Finally, I found a problem that cannot be solved, that is, when the page is long enough, that is, when there is a scroll bar, after the pop-up window appears, if you slide the mask layer behind it, the page behind it will slide upwards. This problem can be solved. The article above uses fixed positioning to solve it, but because of the rotation, this problem becomes invalid, so there is no better solution. It's fine in portrait mode.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.