How can I lock auto rotate on the website for the mobile phone?

Question

I use this way:

   @media (max-height: 480px) and (min-width: 480px) and (max-width: 600px) { 
    html{
        -webkit-transform: rotate(-90deg);
           -moz-transform: rotate(-90deg);
            -ms-transform: rotate(-90deg);
             -o-transform: rotate(-90deg);
                transform: rotate(-90deg);
        -webkit-transform-origin: left top;
           -moz-transform-origin: left top;
            -ms-transform-origin: left top;
             -o-transform-origin: left top;
                transform-origin: left top;
        position: absolute;
        top: 100%;
            left: 0
    }

but when I rotate my phone, I see white display.

Answer 1

You may use media query with orientation for this:

@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) { html { transform: rotate(-90deg); transform-origin: left top; width: 100vh; overflow-x: hidden; position: absolute; top: 100%; left: 0; } }

The trick here is to detect the changed orientation and using CSS transform to rotate the content of your web page so as to mock orientation-lock.

If you are comfortable with the idea of using Javascript to accomplish this then you can try this:

screen.orientation.lock('landscape');

See:

• https://w3c.github.io/screen-orientation/
• https://caniuse.com/screen-orientation