質問: 2DゲームをHTML5(WebGL)でビルドし、サーバーへアップロードしてchromeで表示しています。 この時、ゲームビュー(canvas)がPC(ズーム100%)で見ている時は画面の高さいっぱいに収まるように、スマホで見ている時はスマホの画面サイズいっぱい(iphone6/7/8 plusであれば横1080px * 縦1920px)に広がるようにしたいです。 現在 Build Settings -> Player Settings -> Default Canvas Width / Default Canvas Height をそれぞれ1080/1920にしてビルドしています。(iPhone6/7/8 Plusを前提) そのためchromeの検証でみるとiPhone Plusサイズなら問題なく画面いっぱいにcanvasが描写されるのですが、端末を変えたりするとズレが生じたり、PCビューだと大きすぎて画面に収まらない(ズーム33%くらいまで下げないと収まらない)状態です。 WebGLでビルドしたゲームをPCでもスマホでも、最適な画面サイズ(まるでネイティブアプリのゲームをやっているかのような)にするにはどのようにしたら良いのでしょうか? 現在canvasのcanvas scalerをscale with screen sizeにしたり、 javascriptやcssからcanvasのサイズを変えたりを試みているのですが全て上手くいきません。 ※状況や現象が伝わりづらいと思いますので質問等あればなんでもお願いします!
回答: viewportのmetaタグを挿入し、CSSで調整することで上手くいきました。 ▼参考 https://qiita.com/ryounagaoka/items/045b2808a5ed43f96607