【Unity】WebGLを16:9のレスポンシブにする

2018年7月24日

スポンサーリンク

レスポンシブっていうのはアレだ、サイズが動的に変わるやつ。
今回はそれのアスペクト比を維持したまま変えてみる。

実際にUnityのwebGLが動的に変わるのを見たい場合はこちら
(サイトがレスポンシブに問題を抱えたいます、webglは問題ないですがサイトがおかしく見えたら再読込すると治ります)
“]

まずはiframeに追加記述をする

たぶん、ほとんどの人はiframeを使ってwebGLのindex.htmlを好きなページに移してるはずです。

一応、iframeの埋め込みではなくindex.htmlの方でも同じ手法を使えばできます。

まずは、iframeをdivで囲います

変更前

<iframe src="webGLのindex.htmlが置かれたURL" width="1280" height="720" frameborder="0" scrolling="no"></iframe>

変更後(メニューマークを押して全表示)

<div class="webgl"><iframe src="webGLのindex.htmlが置かれたURL" width="1280" height="720" frameborder="0" scrolling="no"></iframe></div>

大きさ指定してますが、ここは各自自由サイズで。

divで囲ってclass名を加えています、この場合はwebgl、わかりやすい名前に変えてもいいです。

これでhtml側は終わり。

CSSに追加で記述する

次に、CSSにアスペクト比固定レスポンシブを追加。

div classのところをwebglから変えてない場合はこのままコピペ。

.webgl{
width:100%;
padding-bottom: 56.25%;
height:0px;
position: relative;
}
.webgl iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

これで終わり。アスペクト比を変えたい場合は56.25%を変えたいアスペクト比によって調整。
9/16*100=56.25という計算、9と16をアスペクト比事によって変えて計算すればいいだけですね。

では頑張って下さーい。