javascript - How to make a webpage display directly in landscape orientation on a mobile phone?

Question

The webpage is designed for mobile phone horizontal screen. If the page is displayed vertically, the page will be messed up.

Answer 1

Can judge and then prompt the user to rotate

if(window.orientation==90||window.orientation==-90){
    alert("横屏状态！")
}

Or listen for rotation events

window.onorientationchange = function(){ 
    switch(window.orientation){ 
        case -90: 
        case 90: 
            alert("横屏:" + window.orientation);
        case 0: 
        case 180: 
             alert("竖屏:" + window.orientation);
        break; 
    } 
} 

css media query can also be judged

@media (orientation: portrait) { } 横屏 @media (orientation: landscape) { }竖屏 

But there is still a solution:
When opening the page, you can use window.orientation to determine whether the webpage is horizontal or vertical. If it is vertical, add styles to the entire page

transform: rotate(90deg);

In this way, your page will display the horizontal screen effect.

Answer 2

The front end cannot control the horizontal and vertical screen of the mobile phone, but it can be judged through css conditions:

Portrait:

@media screen and (orientation:portrait){
    #wrap{
        display:none;
    }
}

Landscape:

@media screen and (orientation:landscape){
    #wrap{
        display:block;
    }
}

For example, when the screen is vertical, the prompt text is displayed: Please browse horizontally.
Use css operation to show and hide after horizontal screen.