+ 4

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

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

8th Jul 2017, 4:53 PM
Rishubh Naik
Rishubh Naik - avatar
3 Answers
+ 14
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)'; }
8th Jul 2017, 6:21 PM
Burey - avatar
+ 7
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); } }
8th Jul 2017, 6:38 PM
visph - avatar
+ 6
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)
8th Jul 2017, 6:06 PM
Kirk Schafer
Kirk Schafer - avatar