javascript - モバイル フルスクリーン HTML

Question

重複の可能性:
ウィンドウに合わせて HTML5 Canvas のサイズを変更する

携帯電話用の HTML5 ゲームを開発しています。

キャンバスを伸ばして、電話の幅と高さを完全に取りたいと思います。

私はこのコードを使用していますが、あまり正確ではありません:

ourCanvas = document.getElementById('gameCanvas');
context = ourGameCanvas.getContext( '2d' );
ourCanvas.width = $(window).width();
ourCanvas.height = $(window).height();

助言がありますか？

Answer 1

ウィンドウのサイズ変更またはorientationchangeイベントでキャンバスの幅と高さが更新されないようです：

$(window).on("resize", fitCanvas);
fitCanvas();

function fitCanvas() {
    var ourCanvas = document.getElementById('gameCanvas');
    context = ourGameCanvas.getContext( '2d' );
    ourCanvas.width = $(window).width();
    ourCanvas.height = $(window).height();
}

Answer 2

.outerWidth()
.outerHeight()

?

そして、レイアウトをリセットしましたか？お気に入り：

body, html, p, whatever { padding:0; margin:0; }