如何在没有溢出的情况下将画布的宽度和高度设置为浏览器的所有高度和宽度？

Posted 2021-04-28

我想制作一个没有卷轴的文档宽度和高度的画布，但我不知道如何做到这一点。我试过了：

canvas.width = window.innerWidth;
canvas.width = parseInt(getComputedStyle( document.body ).getPropertyValue( 'width' ));
canvas.width = document.body.offsetWidth
canvas.width = document.body.clientWidth

但我有1-20个未使用的像素，我可以滚动，也不能通过固定的像素数减少宽度和高度 - 不同的浏览器显示不同。

答案

如果你问的是如何制作100％视口宽度和高度的元素，你可以使用CSS ......

#selector_id {
    width: 100vw,
    height: 100vh
}

另一答案

window.innerWidth为您提供窗口框内的整个宽度，忽略滚动条。

document.body.clientWidth为您提供垂直滚动条内的宽度 - 如果存在。

这些都适用于当前版本的Safari和Chrome - 我只是给了他们一个快速尝试。

两者都适用于所有现代浏览器，请点击此处查看window.innerWidth和document.body.clientWidth。

我有兴趣知道这些不适合宣传的任何情况。

（当然，如果你完全按照你的方式执行代码，你最终会得到document.body.clientWidth的值。我猜你的意思是你依次尝试了每一个。）

另一答案

由“display：block”修复，canvas元素默认不是块。