1

We have a mobile web page on our website that needs to be always rendered in landscape in the browser when it's loaded. Also, the page needs to be locked in landscape, so that the device cannot change the orientation.

Is there any JS API in the major mobile browsers or CSS property that will accomplish this?

tompave
  • 11,952
  • 7
  • 37
  • 63
BuffBoxx
  • 11
  • 1
  • 1
  • 2
  • 1
    Check here http://stackoverflow.com/questions/14360581/force-landscape-orientation-mode – Jaypee Feb 28 '17 at 21:13
  • 1
    Possible duplicate of [Force “Landscape” orientation mode](http://stackoverflow.com/questions/14360581/force-landscape-orientation-mode) – War10ck Feb 28 '17 at 21:19

1 Answers1

3

You can try using this code:

#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);

   }

You should also add this to the body tag:

 <BODY id="container">

I found this solution here. Same blog also offers additional suggestion but I didn't tried it as the above one worked well

Dorian Popescu
  • 121
  • 3