画面に合わせて要素サイズを自動調整する方法
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);