2

I need to show up my page on mobile Phones and Tablets in portrait mode. How can I force the browser to load it in this orientation. Or how can I disable the landscape Orientation at all?

Andreas Louv
  • 46,145
  • 13
  • 104
  • 123
Andrej Tihonov
  • 649
  • 2
  • 9
  • 21
  • 2
    If you are already using media query for responsive design, then you can have width breakpoint i.e. when your page enters landscape mode to have your page container to have enough margin on either side to emulate the portrait mode – skewl84 Sep 22 '15 at 14:05
  • I think this is a duplicate of: http://stackoverflow.com/questions/8738072/forcing-web-site-to-show-in-landscape-mode-only, whether it's portrait or landscape. – jmargolisvt Sep 22 '15 at 14:18
  • I work a lot with viewportHeight and viewportWidth units, so it is unfortunately not an option. I need something like if u block it directly on the iPhone. – Andrej Tihonov Sep 22 '15 at 14:21

3 Answers3

3

You can not force it :(

The browser is an application on mobile which has the capability to show in landscape or portrait.

So: your question can be reasked as: "is it possible to ask the browser to open only in landscape ?" May be some custom page directive can tell the browser to open itself in landscape mode (search may be you can find some thing here! )

However you can do a css trick (which is not some how recommended) as mentioned in https://www.quora.com/Can-I-use-Javascript-to-force-a-mobile-browser-to-stay-in-portrait-or-landscape-mode

The idea is to use css rotate on all page content 

@media screen and (orientation:landscape) {
  //set you content id
  #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;
  }
}

I recommend solutions mentioned at forcing web-site to show in landscape mode only which gently ask user to rotate the browser (@JasonSebring)

<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>
Community
  • 1
  • 1
Alireza Fattahi
  • 42,517
  • 14
  • 123
  • 173
0
#container {
    display: block;
}
@media only screen and (orientation: portrait) {
#container {
    height: 100vh;
    width: 100vh;
    overflow-x: auto;
    position: absolute;
    top: 100%;
    right: 0;
    transform-origin: 100% 0vh 0;
    transform: rotate(90deg);
    -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);
}
}
Adnan ul-haq
  • 21
  • 2
  • 1
    Please explain why your code solves the problem. – Throvn Dec 16 '22 at 18:06
  • 1
    Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Throvn Dec 16 '22 at 18:06
-1

Maybe you can set a fixed width in yours container css class and use a margin: 0 auto too, so you will have the content set in the center giving the impression of the page always in portrait position, for exemple:

.container{
    width:320px;
    margin: 0 auto; 
}
Eder Campêlo
  • 31
  • 4