How to change the webpage orientation to landscape on mobiles using js or other?

Question

My webpage looks best only in landscape mode. So i want to force screen orientation to landscape on mobile. Is there any way?

Answer 1

i use the following in one of my codes
make to sure to read the article Kirk posted as well
as one thing that might happen is that once the user rotates the device, if the auto rotate is ON it will simply rotate again, causing more headache for the user

// checks if the the device is a mobile or not by testing for regex in the navigator.userAgent

var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);

// after testing, we can simply rotate the html body element how many degrees we want and also set other things like width/height parameters that will be enforced later in the code. in the example below the original orientaion is set to fit to mobile horizontal display (rotated 90 degrees in css), so if the code runs on a PC i will apply 0 degrees orientation to reset the css rotation

if (!isMobile) {
widthRatio = 0.95;
heightRatio = 0.65;
var deg = 0;
document.body.style.webkitTransform = 'rotate('+deg+'deg)';
document.body.style.mozTransform = 'rotate('+deg+'deg)';
document.body.style.msTransform = 'rotate('+deg+'deg)';
document.body.style.oTransform = 'rotate('+deg+'deg)';
document.body.style.transform = 'rotate('+deg+'deg)';
}

Answer 2

Better solution than blocking the orientation is to use css media queries to define css style layout specifically for portrait and landscape mode (you can even define one as default and use media queries only for the other:

/* css styles for default orientation (landscape) */
body { /* some rules */ }
/* css style applied only fro portrait orientation */
@media all and (orientation: portrait) {
body { /* some other rules */ }
}

Anyway, you can even do it with the @Kirk trick, without any JS code:

@media all and (orientation: portrait) {
body {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
}

Answer 3

https://www.quora.com/Can-I-use-Javascript-to-force-a-mobile-browser-to-stay-in-portrait-or-landscape-mode

Basically you rotate your entire page 90 degrees and the user (unless they're really stubborn*) will rotate to match.

To the best of my understanding, Javascript gets to listen for rotation events but it doesn't get to change the orientation. You may just have to present your content sideways.

* like I am when designers assume my device is in my hand (it's in a dock; I have power cords in the way)