スクリーンの向きを制御する

概要

スクリーンの向きは、デバイスの向きと異なる場合があります。デバイスが自身の向きを検知することができない場合でも、スクリーンには向きがあります。またデバイスが自身の向きを知ることが可能であっても、Web アプリケーションのインターフェイスを維持または適合するためにスクリーンの向きを制御できるとよいでしょう。

CSS と JavaScript の双方に、スクリーンの向きを扱う方法がいくつかあります。第一の方法は orientation メディアクエリです。これはブラウザウィンドウがランドスケープモード (すなわち幅が高さより大きい) かポートレートモード (高さが幅より大きい) かに基づいて、CSS を使用してコンテンツのレイアウトを調整できます。

第二の方法は、スクリーン自身の現在の向きを取得して最終的に固定するために使用できる、JavaScript の Screen orientation API です。

向きに基づいてレイアウトを調整する

向きの変化についてのもっとも一般的なケースのひとつが、デバイスの向きに基づいてコンテンツのレイアウトを変更したいときです。例えば、デバイスのディスプレイで最長の寸法に沿ってボタンバーを引き伸ばしたいでしょう。メディアクエリを使用して、簡単かつ自動的にこれを行うことができます。

以下の HTML コードによる例を見てみましょう。

<ul id="toolbar">
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia nisi nec sem viverra vitae fringilla nulla ultricies. In ac est dolor, quis tincidunt leo. Cras commodo quam non tortor consectetur eget rutrum dolor ultricies. Ut interdum tristique dapibus. Nullam quis malesuada est.</p>

スクリーンの向きに応じて固有のスタイルを扱うために、CSS で orientation メディアクエリに頼ります。

/* 始めに、共通のスタイルを定義しましょう */

html, body {
  width : 100%;
  height: 100%;
}

body {
  border: 1px solid black;

  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

p {
  font   : 1em sans-serif;
  margin : 0;
  padding: .5em;
}

ul {
  list-style: none;

  font   : 1em monospace;
  margin : 0;
  padding: .5em;

  -moz-box-sizing: border-box;
  box-sizing: border-box;

  background: black;
}

li {
  display: inline-block;
  margin : 0;
  padding: 0.5em;
  background: white;
}

共通のスタイルを定義したら、続いて向きに対して特有のケースの定義を始めましょう。

/* ポートレートでは、ツールバーを上に置くことを望みます */

@media screen and (orientation: portrait) {
  #toolbar {
    width: 100%;
  }
}

/* ランドスケープでは、ツールバーを左に置くことを望みます */

@media screen and (orientation: landscape) {
  #toolbar {
    position: fixed;
    width: 2.65em;
    height: 100%;
  }

  p {
    margin-left: 2em;
  }

  li + li {
    margin-top: .5em;
  }
}

結果は以下のとおりです。

スクリーンの向きを固定する

一部のデバイス (主にモバイルデバイス) は、スクリーンに表示している内容をいつでも読めるようにするため、デバイスの向きに基づいてスクリーンの向きを動的に変更できます。この動作はテキストコンテンツにはとても適していますが、そのような変化を好まないコンテンツも存在します。例えばデバイスの向きに基づくゲームでは、そのような向きの変化によって混乱してしまうでしょう。

Screen Orientation API は、まさにそのような変化を抑制したり制御したりするものです。

向きの変化をリッスンする

orientationchange イベントは、デバイスがスクリーンの向きを変更する度に発生します。また、向きそのものを screen.orientation プロパティで読み取ることが可能です。

screen.addEventListener("orientationchange", function () {
  console.log("The orientation of the screen is: " + screen.orientation);
});

向きの変更を抑制する

任意の Web アプリケーションが、自身の要望に合うようにスクリーンを固定できます。screen.lockOrientation() メソッドを使用してスクリーンの固定を、また screen.unlockOrientation() メソッドで固定の解除を行います。

screen.lockOrientation() は、適用する固定方式を定義する文字列 (または一連の文字列) を受け入れます。受け入れる値: portrait-primary、portrait-secondary、landscape-primary、landscape-secondary、portrait、landscape (それぞれの値について知るために screen.lockOrientation をご覧ください)。

screen.lockOrientation('landscape');

Firefox OS および Android: マニフェストを使用して向きをロックする

Firefox OS および Android 版 Firefox (近いうちにデスクトップ版 Firefox も対応予定) 特有の向きをロックする方法として、アプリのマニフェストで orientation フィールドを設定できます。例を示します:

"orientation": "portrait"

関連情報

• screen.orientation
• screen.lockOrientation()
• screen.unlockOrientation()
• screen.onorientationchange
• orientation メディアクエリ
• A short introduction to media queries in Firefox 3.5