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

我想使用

canvas

元素覆盖浏览器窗口的整个视口作为背景。我使用Javascript设置

画布的
宽度和
高度。当页面滚动且地址栏隐藏时会出现问题。地址栏会滚动，并在页面上留下一个间隙。地址栏移动似乎没有
事件，因此当地址栏消失时，我无法重新调整
画布的大小。我可以从了解三件事中获益：

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

有没有一种方法可以在所有主要浏览器中一致地获取实际视口的内部尺寸

是否有方法添加事件侦听器以检测视口内部尺寸的变化

编辑：以下是一些代码：

// 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;

画布会调整大小，这意味着地址栏隐藏时会触发调整大小事件，但在地址栏完全隐藏之前不会触发，因为在地址栏完全隐藏之前，不会发生调整大小的操作。这意味着滚动时仍会显示间隙，但一旦地址栏被隐藏，间隙就会被填满。
我会根据浏览器的window.innerHeight和window.innerWidth创建一个函数，在发生
resize
事件时调整画布的大小：

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

});

你能分享你的css和html代码吗？到目前为止，我的代码非常简单。当地址栏移动或隐藏时，
resize
事件不会触发。我需要找到一种方法来检测地址栏何时移动，以便调整画布的大小。我也尝试过使用
scroll
事件，但如果不显示间隙，这也不起作用。我尝试过这样做，它确实使画布与屏幕正确匹配，但由于地址栏移动时不会触发
resize
事件，画布永远不会调整大小，并且在没有地址栏的情况下，视口底部会出现一个间隙。当我使用
滚动
事件而不是调整大小事件时，这实际上是有效的，但是scroll事件的延迟仍然显示了间隙，我也不想每次滚动页面时都调整画布的大小。如果禁用地址栏的隐藏操作：
$（“html，body，canvas”）.css（{height:$（window.height（）}）我不擅长JQuery。这会将CSS中html、body和canvas元素的高度设置为等于窗口的高度吗？我的页面向下滚动，因此body元素比窗口的高度高得多。我可以通过将所有内容嵌套在可滚动的div中并将body的溢出设置为hidden来冻结地址栏，但我之所以将此保存为最后手段，仅仅是因为我不想完全冻结地址栏，而必须始终查看地址栏。