forcing web-site to show in landscape mode only

Question

I want to show my web-site in landscape mode only, is it possibile? It does not matter what the orientation is of device in user's hand but the web site will always be in landscape mode. I have seen iPhone application working like that but can this be done for a web-site?

Solution 1

@Golmaal really answered this, I'm just being a bit more verbose.

<style type="text/css">
    #warning-message { display: none; }
    @media only screen and (orientation:portrait){
        #wrapper { display:none; }
        #warning-message { display:block; }
    }
    @media only screen and (orientation:landscape){
        #warning-message { display:none; }
    }
</style>

....

<div id="wrapper">
    <!-- your html for your website -->
</div>
<div id="warning-message">
    this website is only viewable in landscape mode
</div>

You have no control over the user moving the orientation however you can at least message them. This example will hide the wrapper if in portrait mode and show the warning message and then hide the warning message in landscape mode and show the portrait.

I don't think this answer is any better than @Golmaal , only a compliment to it. If you like this answer, make sure to give @Golmaal the credit.

Update

I've been working with Cordova a lot recently and it turns out you CAN control it when you have access to the native features.

Another Update

So after releasing Cordova it is really terrible in the end. It is better to use something like React Native if you want JavaScript. It is really amazing and I know it isn't pure web but the pure web experience on mobile kind of failed.

Solution 2

While I myself would be waiting here for an answer, I wonder if it can be done via CSS:

@media only screen and (orientation:portrait){
#wrapper {width:1024px}
}

@media only screen and (orientation:landscape){
#wrapper {width:1024px}
}

Solution 3

Try this It may be more appropriate for you

#container { display:block; }
@media only screen and (orientation:portrait){
  #container {  
    height: 100vw;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}
@media only screen and (orientation:landscape){
  #container {  
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
     -o-transform: rotate(0deg);
     -ms-transform: rotate(0deg);
     transform: rotate(0deg);
  }
}

<div id="container">
    <!-- your html for your website -->
    <H1>This text is always in Landscape Mode</H1>
</div>

This will automatically manage even rotation.

Solution 4

I had to play with the widths of my main containers:

html {
  @media only screen and (orientation: portrait) and (max-width: 555px) {
    transform: rotate(90deg);
    width: calc(155%);
    .content {
      width: calc(155%);
    }
  }
}

View more solutions

Comments

[Graham]

Clever, but doesn't really work. Much of the page is inaccesible when it is rotated, because only the content is rotated and not the actual browser.

[Wissam El-Kik]

This would break any animation and it would probably destroy the mobile responsiveness of the page.

[dhruvpatel]

made my day! this is really handy script to force landscape mode on small devices putting a nice message.

[Hitesh Misro]

you got most of the credit though ;) +1d for your well described answer and @Golmaal..

[Mmm]

Really useful, thanks! It's worth noting this doesn't seem to work if you stick it in a separate stylesheet.

[hko]

nice idea.. any artifacts/noise when switching between portrait/landscape?

[Vince]

Your answer's better than the one you reference. You provide an actual solution and recommend an easily implemented warning instead of something more creative and problematic. The other "answer" might've inspired you, but it was more or less just wondering aloud. It would've been better as a comment mentioning the existence of the orientation conditional group property.