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


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

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

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

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

Amazon Web App SDKは、Amazon Developer SDKからダウンロードしてください([Web] ボタンをクリック)。

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

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

<div id="fill">
  ここにコンテンツを記述
</div>

body {
  padding: 0;
  margin: 0;
}

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

これで、すべてのパディングと余白が削除され、300px × 400pxのコンテンツ領域が作成されて、見やすいように1pxの赤い境界線で囲まれたスタイルが適用されます。

スケーリング関数

スケーリング関数では、2つのパラメーターを指定します。1つはスケーリングされるdiv、もう1つはproportionalというブーリアンです。このブーリアンにより、divの幅と高さが比率を維持したままスケーリングされるか、それぞれが独立してスケーリングされるかが決まります。この関数は次のステップを実行して、divのスケーリング方法と配置方法を決定します。

  1. スケーリングするdivの現在の幅と高さ、およびビューポートの使用可能な幅と高さを決定します。
  2. 使用可能な幅を現在の幅で除算し、利用可能な高さを現在の高さで除算します。結果の値が基準倍率になります。
  3. proportionalがtrueの場合、両方の基準倍率が2つのうちの小さい方の値に設定され、幅と高さの比率が維持されるため、画面の可視部を超えることはありません。それ以外の場合、幅と高さが独立してスケーリングされ、画面いっぱいにまで広がります。
  4. 関数が変換要素を決定し、スケーリングされたdivが画面の中央に配置されるようにします。
  5. 関数が基準倍率と変換要素の値を使用して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("Using 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("Using deviceorientation");
    // 上記のイベントとは異なり、これは水平/垂直方向の反転には限られず
    // すべてのデバイスの向きの設定の移動に対してトリガーされます
    $(window).bind("deviceorientation", function() { setTimeout(function() { fillDiv(div, true); }, 500) });
  else {
    console.log("No orientation supported, fallback to resize");
    $(window).bind("resize", function() { fillDiv(div, true); });
  }
}

$(window).load(initialize);