CODEWITHSUNDEEP
cssmedia-queriesscreen-orientation
svnm
svnm

Reputation: 24378

css media query to detect landscape only on mobile iPhone, Android

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.

Upvotes: 0

Views: 2482

Answers (1)

Bratu David
Bratu David

Reputation: 11

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

Upvotes: 0

Related Questions