基於手機屏幕動態設置HTML5畫布的大小

Question

我想爲Phonegap製作一個移動網頁，它包含一個標題和一個上下文，上下文包含一個畫布。 我想讓canvas充滿內容div的100％，並且內容div適合整個屏幕的80％。

這裏是我到目前爲止的代碼

<div id="mappage" data-role="page"> 
    <div id="maphead" data-role="header"> 
    I am the Header 
    </div> 
    <div id="mapcontext" data-role="context"> 
    <canvas id="map" style="background: black"> 
    </canvas> 
    <script> 
     map.onload = map.onrezise = function(){ 
      var canvas = document.getElementById("map"); 
      canvas.style.position = "fixed"; 
      canvas.setAttribute("width", map.innerWidth); 
      canvas.setAttribute("height", map.innerHeight*0.8); 
        canvas.style.top = map.innerHeight * 0.2 ; 
     } 

    </script> 
    </div> 
</div> 

我得到的是一個黑色帆布，不應用新的大小，頂部的風格不適用。

感謝您的幫助提前。

Answer 1

首先，事件名稱是

調整

其次，你必須設置事件窗口。例如

window.addEventListener('resize', function() { 
    var canvas = document.getElementById('map'); 
    canvas.style.position = 'fixed'; 
    canvas.style.width = innerWidth + 'px'; 
    canvas.style.height = innerHeight*0.8 + 'px'; 
    canvas.style.top = innerHeight*0.2 + 'px'; 
});