Lock screen orientation for all mobile devices (browsers)

Question

I am looking for a way to lock the screen orientation to landscape for all mobile device browsers when accessing a website. I couldn't get a clear result when searching cause it always gives results for app creating and locking but not for websites.

Apparently this "kinda" (it does rotate the entire website but it keeps the width of portrait mode) works for Android but not at all in IOS..even in android isn't perfect:

/* if portrait mode is detected, rotate the entire site -90 degrees to hint rotating to landscape */
@media (orientation: portrait) {
  body {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
}

Are you looking for something like this? http://stackoverflow.com/questions/8738072/forcing-web-site-to-show-in-landscape-mode-only — Tom Doodler, Aug 25 '15 at 14:34

score 2 · Answer 1 · answered Aug 25 '15 at 14:52

2

You can force the width using:

@media (orientation: portrait) {
  body {
    width:100vh;

    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
}

answered Aug 25 '15 at 14:52

Szabolcs Páll

1,402
6
25
31

Well, vh isn't supported apparently at the moment so i get the same result, the website width is equivalent to it's width on portrait mode. – Alin Aug 25 '15 at 15:17
I meant by my android device :) I tried it and only afterwards i replied. – Alin Aug 25 '15 at 16:44
Well for those **older devices** you can adjust the width using JS. – Szabolcs Páll Aug 26 '15 at 06:51

Lock screen orientation for all mobile devices (browsers)

1 Answers1