@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;
}
}
Sent in by Andreas Gotfredsen.
I was just playing around with this but haven’t had total success. The vw and vh units still seem to refer to the original portrait orientation, so any layout done with these units breaks. Ideally, we would be able swap vw and vh when the page is rotated, but I couldn’t find any way to do that. One workaround would be to define –vw and –vh variables and set them appropriately for each orientation, but then we are stuck with the clumsy calc()/var() syntax when using them.
Chris, we have for it now Screen Orientation API, see https://w3c.github.io/screen-orientation/
screen.orientation.lock('portrait')
screen.orientation.lock('landscape')
screen.orientation.unlock()
But this will not work for all the browsers
I am getting the following error when I try to run in Google Chrome.
Uncaught (in promise) DOMException: screen.orientation.lock() is not available on this device.
Those
screen.orientation.lock()
API are supported only on FF in mobile …Easy solve… just add height: 100vw;
+1, added ‘height: 100vw;’ and the above works perfectly!
How to disable it? My phone which is OPPO F1 Plus won’t rotate anymore even if I trun the screen rotation on. TIA for answers.
You can’t, you will have to buy a new phone.
A coder implemented this onto my site, and I don’t want it there. How do I remove this? which file do I look in to find it so I can delete it?
It would be in one of the CSS files in the project.
I have no succes with this in Safari iOS 12.2
I have no succes with this in Chrome Mobile – Any recent change?
Wonderful! But how can I do it if: transform: rotate(90deg)?
transform: rotate(90deg);
transform-origin: right top;
width: 100vh;
height: 100vw;
overflow-x: hidden;
position: absolute;
top: 100%;
right: 0;