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';
});

基于移动屏幕动态设置HTML5画布的大小

1 个答案: