0

I have to add in a message to prevent users using an app in landscape mode.

The message which is an overlay on the screen look something like this.

<div id="landscape-rotate">
    <h3>Please rotate to portrait view</h3>
    <i class="fa fa-refresh fa-spin fa-3x"></i>
</div>

I wanted to add this message when the iPhone or Android phone is in landscape mode. So I have added the following media query. Which was one of the answers found here.

@media (max-device-width : 667px) and (orientation : landscape) { 

  #landscape-rotate {
    display: block;
    position:absolute;
  }
}

The only problem is this media query seems to also pick up when the user is typing in portrait mode when the keyboard comes up. Has anyone found a media query to avoid this issue, as it makes this approach unusable so I will need to use JavaScript instead.

Community
  • 1
  • 1
svnm
  • 22,878
  • 21
  • 90
  • 105
  • 1
    have a look [here](http://stackoverflow.com/questions/8883163/css-media-query-soft-keyboard-breaks-css-orientation-rules-alternative-solut) it has several solutions to your problem – paulitto Oct 29 '15 at 20:00

1 Answers1

1
$(window).resize(function() {
  if ($(window).width() < 750) {
  if(screen.availHeight < screen.availWidth){
    $('#landscape-rotate').show();
  } 
  if(screen.availHeight > screen.availWidth) {
    $('#landscape-rotate').hide();
  }
}
});
Bratu David
  • 13
  • 1
  • 2