Block landscape view rotation

Hi. I’m trying to block the landscape view but i’m not able to do it. I used this code but it’s not working fine for my app (see image):

@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;
}
}

What I can do is have the whole landscape background white with this code:

@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
html {
display: none;
}
}

But what i want (if it can be done) is to force always portrait mode and disable landscape rotation.

Thanks

Looking at your screenshots, isn’t that exactly what’s happening?

Yes but with that black block from middle to the bottom of the screen, i don’t know how to manage that :thinking:

Ok i solved it adding (height: "number"vh;)

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

Share a screenshot too :grin:

Here’s a gif! The only thing I do not like is the transition between portrait and landscape, I wish it didn’ t exist. I would like when you turn the mobile it was static, without that little glitch, but I do not think it is possible.

Sorry for the colors of the gif, aren’t the original colors, that background blue… :sweat_smile:, is the compression of the gif…

RPReplay_Final1629102949

2 Likes