移动全屏html [重复]答案

【问题标题】：mobile full screen html [duplicate]移动全屏html [重复]
【发布时间】：2012-11-28 00:47:30
【问题描述】：

可能重复：
HTML5 Canvas resize to fit window

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

我想拉伸画布以占据整个手机的宽度和高度。

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

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

有什么建议吗？

【问题讨论】：

标签： javascript jquery html mobile canvas

【解决方案1】：

.outerWidth()
.outerHeight()

您是否重置了布局？喜欢：

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

该代码与PC浏览器完美匹配，但android浏览器上仍有部分区域不包括在内！！！
@Solieman 如果你检测到orientationchange事件是否可用，你可以绑定eater或者resize
没有方向改变，我正在使用阻止它的浏览器。
也许这会有所帮助：stackoverflow.com/questions/1649086/…