JavaScript 获取浏览器视口宽高并设置 Canvas 容器大小

var viewportWidth = window.innerWidth; var viewportHeight = window.innerHeight;

var canvasContainer = document.getElementById('canvas-container'); canvasContainer.style.width = viewportWidth + 'px'; canvasContainer.style.height = viewportHeight + 'px';

document.body.style.width = '100%'; document.body.style.height = '100%';

document.documentElement.style.width = '100%'; document.documentElement.style.height = '100%';

// 为了确保 Canvas 容器的大小与视口大小一致，需要将 body 和 html 的宽高也设置为 100% 。 // 同时，将 Canvas 容器的宽高设置为视口宽高。这样可以有效地解决滚动条问题。