Rotate mobile screen with jQuery/javascript

Question

How to change the mobile orientation of mobile screen on the click of button? Like portrait view to landscape view?

Look this: http://www.noupe.com/design/html5-screen-orientation-api-uses-javascript-to-rotate-the-screen-89639.html — Marcos Alexandre Sedrez, Nov 24 '16 at 10:58
This could also be helpful: http://stackoverflow.com/questions/14360581/force-landscape-orientation-mode — Pete, Nov 24 '16 at 11:13

score 4 · Answer 1 · answered Nov 24 '16 at 10:57

4

You can use -webkit-transform(CSS) property to change the orientation:

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    $('body').css({
        "-webkit-transform": "rotate(90deg)"
    }); 
}

answered Nov 24 '16 at 10:57

Aniket Sahrawat

11,710
3
36
63

Tushar Upadhyay · Answer 2 · 2020-06-08T03:33:10.490

1

First make the body full screen. You can do it by

document.body.requestFullscreen().then(res=>console.log(res).catch(err=>console.log(err);

Then rotate it by using

screen.orientation.lock('landscape').then(res=>console.log(res)).catch(err=>console.log(err))

Note : This will work only in mobile browser. If you don't know how to use console in android chrome then please read this article Here

edited Jun 08 '20 at 03:33

answered Jun 08 '20 at 03:27

Tushar Upadhyay

61
4

Rotate mobile screen with jQuery/javascript

2 Answers2