search

Home  >  Q&A  >  body text

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

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

PHPzPHPz2747 days ago894

reply all(2)I'll reply

  • 伊谢尔伦

    伊谢尔伦2017-05-19 10:23:44

    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.

    reply
    0
  • PHPz

    PHPz2017-05-19 10:23:44

    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.

    reply
    0
  • Cancelreply