ナビ

画面が縦向きか横向きかを知る

wrote : / update :

ブラウザ、モバイルファースト、メディアクエリー、マルチ画面、タブレット・・・
想定すべき画面サイズ、利用シーンに適した情報のコントロールが崩壊しつつある。

というくだりは、最適な対応手段が見出せるまで言い続けてしまうかもしれない。

PCとタブレットの一体型が各メーカーから発売され、店頭で実機を触ってみた。
これまでの概念モデルとは異なる、あらたな概念モデルを創出する必要があると、直感的に強い印象を持った。
具体的に「何」と表現することは難しいが、あえていうなら、オフラインとオンラインのつながりはこれまで以上に加速し、これまでにない使い方が次々登場し、利用シーンが一気に飛躍すると思う。
「ビックウェーブを見つけた！」と言っては過言だろうか。
ただ「これだ！」という直感があるのに何もできないもやもやが辛い。

さて本題。
キーボードで操作中でも画面タッチができることから、どうやらtouchイベントが有効かどうかの判別ではなく、その画面は縦向きか横向きかを知ることのほうが重要な気がしたのでその方法の備忘録。

ポートレートとランドスケープ

ポートレートとランドスケープ

orientation

ポートレイトかランドスケープか判別する。

端末の向きの設定によって、window.orientation　が「ポートレイト」か「ランドスケープ」か異なるため、実装方法を見直しました。具体的には、画面の縦横の長さを比較します。（2013.5.5） 
if (0 == window.orientation || 180 == window.orientation) {（2013.5.5）
if (window.innerHeight > window.innerWidth) {
  // ポートレイト（ランドスケープ）
} else {
  // ランドスケープ（ポートレイト）
};

onorientationchange

縦向き、横向きが変更したときに処理。

window.addEventListener("orientationchange", function () {
  if (window.innerHeight > window.innerWidth) {
    // ポートレイト（ランドスケープ）
  } else {
    // ランドスケープ（ポートレイト）
  };
}, false);

※addEventListenerができないレガシーブラウザ対応とかはここでは割愛。

最後に、onorientationchangeが有効でない端末・ブラウザ対応を加えて完成。

if ('object' === typeof window.onorientationchange) {
  window.addEventListener("orientationchange", function () {
    if (window.innerHeight > window.innerWidth) {
      // ポートレイト（ランドスケープ）
    } else {
      // ランドスケープ（ポートレイト）
    };
  }, false);
}