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.
Share Improve this question edited Apr 5, 2018 at 12:22 Michel 4,1574 gold badges37 silver badges56 bronze badges asked Apr 5, 2018 at 11:58 Юрий БуцанЮрий Буцан 231 gold badge1 silver badge4 bronze badges2 Answers
Reset to default 2You 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()