Force web app visitor to use Landscape mode on iPad

Question

My app is not meant to be used in portrait mode on iPads (I handle other mobile devices differently). I need to show a message to the user to rotate their device into Landscape, in order to use the app.

Answer 1

controllers/application.js

isPortrait: false,

handlePortrait: function() {
  const mql = window.matchMedia("(orientation: portrait)");

  if (!isMobile.apple.tablet) {
    return;
  }

  if (mql.matches) {
    this.set('isPortrait', true);
  } else {
    this.set('isPortrait', false);
  }

  mql.addListener((m) => {
    if (m.matches) {
      this.set('isPortrait', true);
    }
    else {
      this.set('isPortrait', false);
    }
  });
}.on('init'),

application.hbs

{{#if isPortrait}}
  <div class="text-center">
    <i class="fa fa-refresh fa-5x text-muted" aria-hidden="true"></i>
  </div>
  <h2 class="text-center">Please rotate your device</h2>
  <h4 class="text-center text-muted">This app needs more horizontal space than is available in portrait orientation</h4>
{{else}}
    <!-- your normal template code here -->
{{/if}}