Force "Landscape" Orientation Mode

Force “landscape” orientation mode

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.

How do you force a website to be in landscape mode when viewed on a mobile device?

Short answer, you can't and you shouldn't control a user's OS behaviour via a website.

You can display a warning using the answer on the following question:
forcing web-site to show in landscape mode only

Or you can force your layout to look like landscape even in portrait mode using the following code (taken from http://www.quora.com/Can-I-use-Javascript-to-force-a-mobile-browser-to-stay-in-portrait-or-landscape-mode):

@media screen and (orientation:landscape) {

  #container {
    -ms-transform: rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
    transform: rotate(-90deg);
    width: /* screen width */ ;
    height: /* screen height */ ;
    overflow: scroll;
  }
}

As the second site recommends though, you should try and make your site look good however the user wishes to view it.

Force landscape orientation in one View

I solved this by orientating on bmjohns answer on a similar question:

1. Add some code in AppDelegate (this part i had already)
2. Make a struct and func which does the job (small adjustments for XCode 11 and SwiftUI were needed)
3. Execute the func onAppear of your View

Android: Force landscape orientation but allow rotation

You just need to set the android:screenOrientation attribute in your AndroidManifest.xml to sensorLandscape

How to force landscape mode when using mobile browser (Unity webgl)?

You can try with something like this:

lockAllowed = window.screen.lockOrientation(orientation);

You can find more information here:
https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation

on chrome something like this should work

var lockFunction =  window.screen.orientation.lock;
if (lockFunction.call(window.screen.orientation, 'landscape')) {
           console.log('Orientation locked')
} else {
            console.error('There was a problem in locking the orientation')
}

basically you only need to specify what orientation you need (landscape in your case).
This is a solution that I'm not sure will work on mobile.

So for mobile you can also try to create a manifest.json

<link rel="manifest" href="http://yoursite.com/manifest.json">

{
   "name":"A nice title for your web app",
   "display":"standalone",
   "orientation":"landscape"
}

A unity only solution can be to just rotate everything based on the x and y of the screen (by using canvas rect) so that you can rotate when x > y and rotate again when that change (the user should only see landscape this way).

---

Related Topics