Currently, I am facing an issue with my website where it functions perfectly on mobile devices in landscape orientation but elements get distorted when viewed in portrait mode.
Is there a method to ensure that the website is always displayed in landscape mode regardless of the device's orientation?
I attempted using the following code snippet from a similar inquiry:
@media only screen and (orientation:portrait) {
body {
height: 100vw;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
}
@media only screen and (orientation:landscape) {
body {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
}
Any insights into why this approach is not effective?
Your assistance is greatly appreciated!