javascript - 手机全屏html

Question

可能重复：
HTML5 Canvas 调整大小以适合窗口

我正在为手机开发 HTML5 游戏。

我想拉伸画布以获取完整的手机宽度和高度。

我正在使用此代码，但它不是很准确：

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

有什么建议么？

Answer 1

看起来您的画布不会在窗口调整大小或方向更改事件时刷新它的宽度和高度：

$(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; }