Question

根据Javascript的window.innerWidth和window.innerHeight属性的文档，两者都是在没有工具栏和滚动条的情况下计算的。但是，当我尝试将div元素和canvas元素设置为与窗口大小相同时，两个元素的宽度和高度属性都会超出。我该如何解决这个问题？

Pen

HTML

<body>
    <div id="gameScreen">
        <canvas id="basemap"></canvas>
    </div>
</body>

CSS

html, body{
    margin: 0;
    padding: 0;
}

#gameScreen{
    margin: 0;
    padding: 0;
    border: 1px solid black;
}

#basemap{
    margin: 0;
    padding: 0;
    background-color: red;
}

JS

function sizePage(){
    var gameScreen = document.getElementById("gameScreen");
    var basemap = document.getElementById("basemap");
    var canvasWidth = window.innerWidth;
    var cnavasHeight = window.innerHeight;
    gameScreen.style.width = canvasWidth +"px";
    gameScreen.style.height = cnavasHeight +"px";
    basemap.width = canvasWidth;
    basemap.height = cnavasHeight;
}
sizePage();

window.addEventListener("resize", function(){
    sizePage();
})

Answer 1

我做了一些尝试和错误的过程，这似乎可行：

首先要做一些CSS，将主体设置为全屏显示：
（如果您想在画布后添加更多html内容，请使用主体的div）

body {
        margin: 0;
        height: 100vh;
        width: 100vw;
    }

现在使用javascript将画布调整为全屏主体的大小：

canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;

可选优化：
就像现在在顶部的小樱桃一样，在<head></head>
中添加响应性元标记

<!--this is optional-->
<meta name="viewport" content="width=device-width, initial-scale=1">

帆布没有调整到窗口内部宽度＆amp;高度

1 个答案: