基于手机屏幕动态设置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'; 
});