87

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?

coure2011
  • 40,286
  • 83
  • 216
  • 349
  • 3
    Good question, but I'd bet the answer is "Not possible" although you can kind of cheat: http://stackoverflow.com/a/4807047/615754. – nnnnnn Jan 05 '12 at 05:37
  • Not really. You can sort of fake it using css transforms but it's ugly, and i don't think there's a way to know if it's upside down on android. Pretty sure this has been discussed here before. – Dagg Nabbit Jan 05 '12 at 05:37
  • 1
    is it possible to force website to have min-width: 320px? so if the screen size is of lower resolution user will need to scroll to view full site. Or Can I zoom 240px width to 320px content? – coure2011 Jan 05 '12 at 05:42
  • I am not sure how helpful this link might be to you but the latest [Jan 2020] features suggest a new API for Orientation lock from W3C https://w3c.github.io/screen-orientation/ – Sarath Sajan Mar 09 '20 at 19:14

5 Answers5

121

@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.

King Friday
  • 25,132
  • 12
  • 90
  • 84
  • made my day! this is really handy script to force landscape mode on small devices putting a nice message. – dhruvpatel Oct 04 '16 at 16:10
  • you got most of the credit though ;) +1d for your well described answer and @Golmaal.. – Hitesh Misro Oct 21 '16 at 09:17
  • Really useful, thanks! It's worth noting this doesn't seem to work if you stick it in a separate stylesheet. – Mmm Sep 27 '18 at 00:22
  • 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. – Vince Oct 30 '20 at 05:11
47

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}
}
Golmaal
  • 669
  • 5
  • 8
36

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.

Mr. A
  • 1,221
  • 18
  • 28
  • 8
    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. – Graham Jul 18 '14 at 09:00
  • 3
    This would break any animation and it would probably destroy the mobile responsiveness of the page. – Wissam El-Kik Sep 28 '14 at 21:23
2

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%);
    }
  }
}
Kraken
  • 5,043
  • 3
  • 25
  • 46
0

This is working for me!

CSS:

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: lightcyan;
}
@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: portrait) {
  .container {
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
    height: 100vw;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
}

HTML:

   <div className="container">
    {/* your code for your website */}
   </div>
amboji alur
  • 175
  • 2
  • 7