Website Orientation

Question

I have a website which will be opened most time in mobile, and I need that website to be displayed in landscape mode by default. (Though user is in portrait mode, then also it should be in landscape mode). Please help me out, which code to use...

I used this code but it didn't help me out, in any way..

<script>
  var start = function() {
    screen.orientation.lock('landscape-primary').then(
      startInternal,
      function() {
        alert('To start, rotate your screen to landscape.');

        var orientationChangeHandler = function() {
          if (!screen.orientation.type.startsWith('landscape')) {
            return;
          }
          screen.orientation.removeEventListener('change', orientationChangeHandler);
          startInternal();
        }

        screen.orientation.addEventListener('change', orientationChangeHandler);
      });
  }
  window.onload = start;
</script>

Are you using Webview for displaying website on your mobile?? — Vishal Senjaliya, May 14 '17 at 14:19
I don't know how to use it, I am just using simple HTML as regular. — , May 14 '17 at 14:23
why dont you use css media queries? https://jsfiddle.net/5whzxb8m/ — 172d042d, May 14 '17 at 14:25

score 0 · Answer 1 · answered May 14 '17 at 14:26

0

might be easier if you used css ;

@media (orientation: portrait) { 
    .reorientMessage{
        visibility: visible;
    }
    .mainContent{
        visibility: hidden ;
    }
}
@media (orientation: landscape) { 
    .reorientMessage{
        visibility: hidden;
    }
    .mainContent{
        visibility: visible ;
    }
}

html eg.;

<div class="reorientMessage">please reorient etc..</div>
<div class="mainContent">normal stuff here</div>

answered May 14 '17 at 14:26

Bob

1,589
17
25

It helped me out somewhere, but it forces the user to reorient. I need the website to be at landscaped only. – May 14 '17 at 14:43
Looks like this may be what you want : http://stackoverflow.com/questions/14360581/force-landscape-orientation-mode – Bob May 14 '17 at 15:08
There may be other issues like whether the user's device/settings allows reorientation, whether the version of webkit on the device supports it without bugs etc. So answering your OP specifically - why THAT code isn't working for you is a bit difficult ( ie. how is it not working for you ? ) So I'll butt out here :) – Bob May 14 '17 at 15:15

Website Orientation

1 Answers1