画布尺寸不适合窗口内部宽度和高度答案

【问题标题】：Canvas not sizing to window inner width & height画布尺寸不适合窗口内部宽度和高度
【发布时间】：2016-09-26 14:57:46
【问题描述】：

根据 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;
}

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

【问题讨论】：

@HansGerber 是的，谢谢。
对我来说似乎工作正常。当你说他们在both elements have excess on their width and the height properties时，他们有多大？
@phreakv6 宽度似乎只比屏幕或滚动条宽度宽 2px。所以这很容易解决。高度似乎要大得多，但是，可能是工具栏的高度。我试图弄清楚多少。不过，我的困惑是，高度和宽度不应该包括工具或滚动条尺寸。
我明白了。在 OS X 上的 Chrome/Safari 上，滚动条仅在需要时出现，并且确实出现在画布顶部。我注意到这是使用 document.body.scrollWidth 和 document.body.clientWidth 时的行为，但如果这对你有用，你可以尝试。
@phreakv6 是完全禁用滚动条还是只减去滚动条宽度更好？

标签： javascript html css canvas

【解决方案1】：

我做了一些尝试和错误过程，这似乎有效：

首先做一些 css 将 body 设置为全屏：
（如果你想在画布上添加更多 html 内容，请使用 div insted of body）

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

canvas {
    /* setting display to block is really important*/
    display: block;
}

现在 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">

【讨论】：