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?
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;
max-width needs to be 895px or more for a Pixel 4a phone.
max-width needs to be 895px or more for a Pixel 4a phone.
Why is min-width needed?
What about touchscreen laptops that choose 640×480?
Is it possible in a media query to specify width > height?
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