to topto bottom

モバイルファースト時代のマルチデバイス対応を確実・簡単に

Webサイトでスマホ・タブレットの傾きの判断をwindow.orientationだけに頼るのは危険

スマホ・タブレットの傾きの判断

こんにちは。x-fit開発チームの山本です。
 
スマートフォンやタブレットでは、端末を縦方向(portrait)で持っているか、横方向(landscape)で持っているかを、傾きセンサで検知することができます。スマートデバイス向けのWebサイトでは、javascriptでその方向を取得し、その傾きに合わせて表示を変えるといったこともよく行われています。
javascriptでは、傾きが発生したタイミングや、傾いている方向を取得することができますが、その取得されるイベントや、傾きの数値が、OSのバージョンや機種によって異なっています。いくつかの実機を使って確認してみます。
 
 
 

【HTML&Javascriptコード】

下記のようなコード(抜粋)で、端末を回転させながら表示してみます。
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<title>Detect window orientation</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
  var previousOrientation = -1;
  var previousEvent = "";
  var checkOrientation = function() {
    var eventChanged = false;
    var orientationChanged = false;
    if (window.orientation !== previousOrientation) {
      previousOrientation = window.orientation;
      orientationChanged = true;
    }
    if(window.event.type !== previousEvent){
      previousEvent = window.event.type;
      eventChanged = true;
    }
    if(eventChanged || orientationChanged){
      var message = "<br/>---Event has been detected.---<br/>event = " + previousEvent + "<br/>";
      if(orientationChanged){
        message += "orientation = " + previousOrientation;
      }else{
        message += "orientation has no change.";
      }
      eventChanged = false;
      orientationChanged = false;
      var previousContent = $("#detectevent").html();
      $("#detectevent").html(previousContent + message);
    }
  };
  window.addEventListener("resize", checkOrientation, false);
  window.addEventListener("orientationchange", checkOrientation, false);
</script>
</head>
<body>
<div id="detectevent"></div>
</body>

【確認結果】

機種 OS・Version 基本の
方向
上に向ける辺 orientationが
変化するイベント
上辺 右辺 底辺 左辺
iPhone 4 iOS 4.0 portrait 0 90 × -90 orientationchange
iPhone 4S iOS 5.0 portrait 0 90 × -90 orientationchange
iPad2 iOS 5.0 portrait 0 90 180 -90 orientationchange
New iPad iOS 5.0 portrait 0 90 180 -90 orientationchange
Xperia Android_1.6 portrait 0 90 × × resize
IS04 Android_2.1 portrait 0 90 × × resize
X06HT Android_2.2 portrait 0 90 × -90 orientationchange
Xperia arc Android_2.3 portrait 0 90 × -90 orientationchange
GALAXY NEXUS Android_4.0 portrait 0 90 × -90 orientationchange
IS12T Windows
Phone 7.5
portrait ※1 ※1 × ※1 resize※1
L-06C Android_3.0 landscape 0 90 180 -90 orientationchange
Galaxy Tab 7.0 Plus
(SC-02D)
Android_3.2 portrait -90 0 90 180 orientationchange
GALAXY Tab 10.1 LTE
(SC-01D)
Android_3.2 landscape 0 90 180 -90 orientationchange
Galaxy Tab
(SC-01C)
Android_2.2 portrait 0 90 180 -90 orientationchange
 
  • 上記の表の「基本の方向」は、「端末やキャリアのロゴが正対に読める向き」または「ホームボタンなど操作系ボタンが下部に来る向き」に持った時に、縦長(portrait)になるか、横長(landscape)になるかを示しています。「上に向ける辺」の上下左右は、この基本の向きの持ち方をした時の状態での上下左右の辺を指しています。
  • いちばん右の列は、画面を回転させると発生する「orientationchangeイベント」と「resizeイベント」のうち、window.orientationプロパティが変化するイベントがどちらかを示しています。
  • 「×」は、回転させても画面上の変化がなく、イベントも発生しなかったことを示しています。
 
※1:WindowsPhoneでは、orientationchangeイベントは発生せず、resizeイベントが発生するものの、window.orientationプロパティがundefinedとなり、取得できませんでした。これについては、後日、別の記事にまとめたいと思います。
 

【対応】

前述の結果から、window.orientationの数値のみでは、画面が縦なのか横かなのを判断することはできません。縦長・横長をきちんと判断するには、resize、またはorientationchangeイベント発生時に、画面の縦サイズ、横サイズを取得するjavascriptを書き、長さを比較して判断する必要があります。
 
※本記事は、弊社開発チーム所有機での確認結果であり、全機種調査の結果ではありません。同一機種であっても、この現象が必ず発生することを保証するものではありません。これ以外や例外のある可能性がありますことをご了承ください。
このエントリーをはてなブックマークに追加