基于手机屏幕动态设置 HTML5 画布大小

Question

我想为Phonegap制作一个移动网页，它由一个标题和一个上下文组成，上下文包含一个画布。 我想让画布填充 100% 的内容 div，并使内容 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';
});