强制网络应用访问者在 iPad 上使用横向模式

Question

我的应用不适合在 iPad 上以纵向模式使用（我对其他移动设备的处理方式不同）。我需要向用户显示一条消息，将他们的设备旋转到横向，以便使用该应用程序。

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}}

强制网络应用访问者在 iPad 上使用横向模式

Force web app visitor to use Landscape mode on iPad

ember.js

matchmedia

ember-cli