手機全屏HTML

Question

可能重複：
HTML5 Canvas resize to fit window

我正在開發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; }