1

I have my website and want to prevent landscape mode. I want to keep users restricted to potrait mode as I have custom headers that uses around 100px space of the screen in fixed position.

Also, I want this to applied to devices below 777px of screen width.

Guys, please, let me know if it is possible, if yes then how. When I use the code that have been used for marking this as duplicate I get this problemit doesnot take the wdth properly at all as in screenshot.

Abhishek Dhanraj Shahdeo
  • 1,356
  • 2
  • 14
  • 35

3 Answers3

4

Use css media queries to show a sign to turn the device:

#turn {
  display: none;
  z-index: 100;
  position: fixed;
}

@media (orientation: landscape) {
  #turn {
    display:block;
  }
}

<div id="turn">
  Please turn your device
</div>
Jonas Wilms
  • 132,000
  • 20
  • 149
  • 151
  • I want to restrict the user from using landscape, and be restricted to potrait mode only. If I wanted to show that message then, I could've done it earlier. – Abhishek Dhanraj Shahdeo Aug 31 '16 at 11:16
  • @Abhishek Dhanraj Shahdeo: i dont now a better way and i wanted to show you a possible workaround – Jonas Wilms Aug 31 '16 at 11:17
  • thanks buddy, but what I am looking for is something different. If you come across any solution then please do let me know. – Abhishek Dhanraj Shahdeo Aug 31 '16 at 11:20
  • Showing a message saying that they need to use portrait mode is the best way to achieve what you're after. – Andy Holmes Aug 31 '16 at 13:29
  • @AbhishekDhanrajShahdeo - You are not doing a good job of defining your problem. Why do you want to restrict the user from choosing their interface? You are not going to be able to stop them from turning their phone into landscape mode. That is an internal hardware/software configuration inside iPhone/Safari `-(NSUInteger)supportedInterfaceOrientations`. It is your job as the developer to provide accessibility to all cases that are possible. If you don't want to provide that accessibility, then the user will learn to use the website as you intended or they won't use it at all. – bdparrish Sep 01 '16 at 11:16
  • @bdparrish - My website has some fixed content which takes a lot space and user cannot view other contents properly due to that much space already occupied, so I want the user to be on potrait mode itself rather than on landscape to add this to his user experience. – Abhishek Dhanraj Shahdeo Sep 01 '16 at 11:30
  • @AbhishekDhanrajShahdeo - seems like your UI is restrictive, so I go back to users will learn to use portrait only or they won't use the site. – bdparrish Sep 01 '16 at 12:21
1

I guess you could try something like this:

@media (orientation: landscape) and (max-width: 777px) {
  html {
    transform: rotateZ(90deg);
  }
}

But showing a message to rotate would be much more user friendly. Some people find it hard to use the portrait mode.

jfrej
  • 4,548
  • 29
  • 36
-1

You can solve this problem with javascript if you'd like. For testing purposes, you can add the following code to your page:

window.onresize = function (event) {
    console.log('resizing!');
    console.log(`new size: w${window.innerWidth} h${window.innerHeight}`);
    if(window.innerWidth < 777) {
        // do something
    }
    if(window.innerWidth > window.innerHeight) {
        // do something
    }
}

The value returned by window.innerWidth and window.innerHeight is a Number, so you can do calculations with it.

CherryNerd
  • 1,258
  • 1
  • 16
  • 38