to topto bottom

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

WebサイトでWindows Phone 7の縦持ち・横持ちを判断する方法

windows phone

こんにちは。x-fit開発チームの山本です。
 
先日公開した、「Webサイトでスマホ・タブレットの傾きの判断をwindow.orientationだけに頼るのは危険」で、Windows Phone 7は、他のスマートデバイスと異なる結果となりました。今回はWindows Phone 7に絞って、端末の縦横検知についてまとめてみようと思います。
 
 
 

【HTML&Javascriptコード】

下記のようなコード(抜粋)で、端末(IS12T)を回転させながら表示してみます。
<meta charset="UTF-8">
<!-- viewportの指定があるかどうかで挙動に変化があるか確認する -->
<!--  <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">
  $(function() {
    //load時に一度表示、その後の/bindするイベントをresize,orientationchangeでそれぞれ確認する。
    $(window).bind("load resize", function(event) {
      var ori = window.orientation;
      var w = $(this).width();
      var h = $(this).height();
      var t = event.type;
      $("#detectevent p").eq(0).text("window.orientation=" + ori);
      $("#detectevent p").eq(1).text("width=" + w);
      $("#detectevent p").eq(2).text("height=" + h);
      $("#detectevent p").eq(3).text("eventType=" + t);
    });
  });
</script>
</head>
<body>
  <div id="detectevent">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
  </div>
</body>

【確認結果】

 
viewport指定 なし あり
resizeイベント 発生しない 発生する
orientationchangeイベント 発生しない 発生しない
orientationが取得できるか undefined undefined
画面縦サイズ変化を検知できるか できない できる
画面横サイズ変化を検知できるか できない できる
 
 
確認の結果、以下のことがわかりました。
・Windows Phone 7では、orientationchangeイベントは発生せず、window.orientationプロパティも取得できない。
・Windows Phone 7では、viewportを設定しないと、端末を回転させてもresizeイベントが発生せず、画面サイズの変更も検知できない。

【対応】

Windows Phone 7では、viewportを設定しないと、画面サイズ変更を検知できません。そのため、最低限viewportの設定を行いましょう。そのうえで、resizeイベントを監視して、イベント発生時に画面の縦横サイズをそれぞれ取得、比較して、縦持ち・横持ちを判断しましょう。
 
※本記事は、弊社開発チーム所有機での確認結果であり、全機種調査の結果ではありません。同一機種であっても、この現象が必ず発生することを保証するものではありません。これ以外や例外のある可能性がありますことをご了承ください。
 

 

このエントリーをはてなブックマークに追加