画面に合わせて要素サイズを自動調整する方法

JavaScriptやjQueryを使用して、デバイスの向きに関係なく、画面に合わせて要素のサイズを変更できます。この手法は、サイズが固定されたゲームでデバイスに関係なくプレイ領域を最大化するのに便利です。

FillScreenのサンプルはこの手法を示しています。このサンプルのコードは、Amazon Web App SDKの次のフォルダにあります。

Amazon-Web-SDKs/Webapps/examples/Cookbook/FillScreen/

Amazon Web App SDKは、SDKのダウンロードページからダウンロードしてください（[ウェブアプリ] をクリック）。

最初のマークアップとスタイル
スケーリング関数
- スケーリング関数の呼び出し

最初のマークアップとスタイル

最初に必要なマークアップとスタイルは以下のとおりです。

<div id="fill">
  コンテンツはこちら
</div>

body {
  padding: 0;
  margin: 0;
}

#fill {
  width: 300px;
  height: 400px;
  border: 1px solid red;
}

上記のスタイルでは、すべてのパディングと余白を削除し、300 px × 400 pxのコンテンツ領域を作成して、見やすいように1 pxの赤い境界線で囲みます。

スケーリング関数

スケーリング関数は、スケーリングの対象となるdivとブール型のproportionalという2つのパラメーターを取ります。このブール型パラメーターにより、divを幅と高さの比率を維持したままスケーリングするか、それぞれを独立にスケーリングするかが決まります。この関数は次の手順で、divのスケーリング方法と配置方法を決定します。

スケーリングするdivの現在の幅と高さ、およびビューポートの使用可能な幅と高さを決定します。
使用可能な幅を現在の幅で除算し、使用可能な高さを現在の高さで除算します。結果の値がスケーリング倍率になります。
proportionalがtrueの場合、両方のスケーリング倍率が2つのうちの小さい方の値に設定され、幅と高さの比率が維持されるため、画面の可視部を超えることはありません。それ以外の場合、幅と高さが独立してスケーリングされ、画面いっぱいに広がります。
スケーリングされたdivが画面の中央に配置されるように、平行移動係数を決定します。
スケーリング倍率と平行移動係数の値を使用して、divのCSSプロパティを更新します。

次にスケーリング関数の実装例を示します。

function fillDiv(div, proportional) {
  var currentWidth = div.outerWidth();
  var currentHeight = div.outerHeight();

  var availableHeight = window.innerHeight;
  var availableWidth = window.innerWidth;

  var scaleX = availableWidth / currentWidth;
  var scaleY = availableHeight / currentHeight;

  if (proportional) {
    scaleX = Math.min(scaleX, scaleY);
    scaleY = scaleX;
  }

  var translationX = Math.round((availableWidth - (currentWidth * scaleX)) / 2);
  var translationY = Math.round((availableHeight - (currentHeight * scaleY)) / 2);

  div.css({
    "position": "fixed",
    "left": "0px",
    "top": "0px",
    "-webkit-transform": "translate(" + translationX + "px, "
                                      + translationY + "px) scale3d("
                                      + scaleX + ", " + scaleY + ", 1)",
    "-webkit-transform-origin": "0 0"
  });
}

スケーリング関数の呼び出し

アプリの起動時および画面の向きが変わるたびにスケーリング関数を呼び出す必要があります。windowのコンテンツが完全に読み込まれたら、fillDiv関数を呼び出し、divをスケーリングして中央に配置します。さらに、fillDivを呼び出すハンドラーを画面の向きの変更イベントに紐付けて、このイベントが検出されるたびに、fillDivが呼び出されるようにします。

次に示す関数のサンプルinitialize()では、fillDiv()を呼び出し、画面の向きの変更イベントにハンドラーを紐付けます。initialize()関数はwindowの読み込みイベントに紐付けられます。

function initialize() {
  var div = $("#fill");
  fillDiv(div, true);

  if ("onorientationchange" in window) {
    console.log("orientationchangeを使用");
    // 一部のAndroidバリアントにバグがあり、
    //（上記のfillDivで使用される）innerHeightやouterHeightなどの指標が
    // orientationEventのトリガー時に更新されません。この場合は、
    // 0.5秒の遅延を設定することで、ブラウザは指標を更新してから
    // divを再スケーリングすることができます。
    $(window).bind("orientationchange", function() { setTimeout(function() { fillDiv(div, true); }, 500) });
  } else if ("ondeviceorientation" in window) {
    console.log("deviceorientationを使用");
    // 上記のイベントとは異なり、これは水平／垂直方向の反転に限らず、
    // デバイスの向きのあらゆる変化に対してトリガーされます
    $(window).bind("deviceorientation", function() { setTimeout(function() { fillDiv(div, true); }, 500) });
  else {
    console.log("向きはサポートされていません。サイズ変更にフォールバックします");
    $(window).bind("resize", function() { fillDiv(div, true); });
  }
}

$(window).load(initialize);