Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Force “landscape” orientation mode

I'm trying to force the "landscape" mode for my application because my application is absolutely not designed for the "portrait" mode. How can I do that?

like image 501
user1599537 Avatar asked Jan 16 '13 14:01

user1599537


People also ask

How do you force landscape in CSS?

To force website to show in landscape mode only with CSS, we can set the width of the page in different orientations. to set the element with ID wrapper to width 1024px in portrait and landscape orientation.

How do I force landscape in IOS?

On an iPhone without a Home button, swipe down from the top-right corner of the screen instead. Here, tap on the rotation lock icon (which looks like a lock with a circular arrow) to turn it on or off.

How do I force my screen to rotate?

Use Rotation Control to force screen orientation of Android devices. Once you've installed, open the app and just tap to turn it on. You can even start it when you restart your phone. This will help you when you don't want to open the again and again after every reboot.


1 Answers

It is now possible with the HTML5 webapp manifest. See below.


Original answer:

You can't lock a website or a web application in a specific orientation. It goes against the natural behaviour of the device.

You can detect the device orientation with CSS3 media queries like this:

@media screen and (orientation:portrait) {     // CSS applied when the device is in portrait mode }  @media screen and (orientation:landscape) {     // CSS applied when the device is in landscape mode } 

Or by binding a JavaScript orientation change event like this:

document.addEventListener("orientationchange", function(event){     switch(window.orientation)      {           case -90: case 90:             /* Device is in landscape mode */             break;          default:             /* Device is in portrait mode */     } }); 

Update on November 12, 2014: It is now possible with the HTML5 webapp manifest.

As explained on html5rocks.com, you can now force the orientation mode using a manifest.json file.

You need to include those line into the json file:

{     "display":      "standalone", /* Could be "fullscreen", "standalone", "minimal-ui", or "browser" */     "orientation":  "landscape", /* Could be "landscape" or "portrait" */     ... } 

And you need to include the manifest into your html file like this:

<link rel="manifest" href="manifest.json"> 

Not exactly sure what the support is on the webapp manifest for locking orientation mode, but Chrome is definitely there. Will update when I have the info.

like image 88
Rémi Breton Avatar answered Nov 15 '22 13:11

Rémi Breton