title: css media query to detect landscape only on mobile iPhone, Android
body: <p>I have to add in a message to prevent users using an app in landscape mode. </p>
  
  <p>The message which is an overlay on the screen look something like this.</p>
  
  <pre><code>&lt;div id="landscape-rotate"&gt;
      &lt;h3&gt;Please rotate to portrait view&lt;/h3&gt;
      &lt;i class="fa fa-refresh fa-spin fa-3x"&gt;&lt;/i&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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 <a href="https://stackoverflow.com/questions/4917664/detect-viewport-orientation-if-orientation-is-portrait-display-alert-message-ad">here</a>.</p>
  
  <pre><code>@media (max-device-width : 667px) and (orientation : landscape) { 
  
    #landscape-rotate {
      display: block;
      position:absolute;
    }
  }
  </code></pre>
  
  <p>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.</p>