移动浏览器上的全视口固定位置画布

Question

我想使用canvas元素来覆盖浏览器窗口的整个视口作为背景。我使用Javascript来设置canvas的width和height。当页面滚动并且地址栏隐藏时，会出现问题。地址栏滚动离开并在页面上留下空白。地址栏移动似乎没有event，因此当地址栏消失时，我无法重新调整canvas的大小。我可以从了解三件事中受益：

有没有办法检测地址栏的移动/隐藏？

有没有办法在所有主流浏览器中一致地获取实际视口的内部尺寸？

有没有办法添加事件侦听器来检测视口内部尺寸的变化？

编辑：这是一些代码：

// This is how I size my canvas;
function resize(event) {
context.canvas.height = document.documentElement.clientHeight;
context.canvas.width = document.documentElement.clientWidth;
}
window.addEventListener("resize", resize, false); // resize every time window changes
resize(); // Call function once to size the canvas
/* This is the CSS for my canvas */
canvas {
position:fixed;
top:0px;
left:0px;
margin:0;
padding:0;
z-index:-1; /* Forces canvas to background */
}

编辑 2：

我将调整大小功能更改为：

context.canvas.height = window.innerHeight;
context.canvas.width = window.innerWidth;

画布会调整大小，这意味着当地址栏隐藏时，resize 事件会触发，但在地址栏完全隐藏之前不会触发，因为在完全隐藏之前，不会发生大小调整。这意味着滚动时仍会显示空白，但在隐藏地址栏后会填充。

Answer 1

我会创建一个函数，当resize事件发生时，它会根据浏览器的window.innerHeight和window.innerWidth调整画布的大小：

(function() {
// triggers when the address bar hides
window.addEventListener('resize', resizeCanvas, false);
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
drawOnCanvas(); 
}
// call it for the starting windows size
resizeCanvas();
function drawOnCanvas(){
// here you can re-draw something on your canvas whenever the size changes
}
});