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.

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.

• javascript
• html
• css
• frontend
• screen-rotation

Share Improve this question Follow edited Apr 5, 2018 at 12:22 Michel 4,15744 gold badges3737 silver badges5656 bronze badges asked Apr 5, 2018 at 11:58 Юрий БуцанЮрий Буцан 2311 gold badge11 silver badge44 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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 fortable with the idea of using Javascript to acplish this then you can try this:

screen.orientation.lock('landscape');

See:

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

You can try this https://w3c.github.io/screen-orientation/ and use:

screen.orientation.lock('portrait')
screen.orientation.lock('landscape')
screen.orientation.unlock()