Question

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

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

有没有办法在所有主流浏览器中始终获取实际视口的内部维度？

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

编辑：以下是一些代码：

canvas

编辑2：

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

// 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 */
}

画布会调整大小，这意味着当地址栏隐藏时会调用resize事件，但在地址栏完全隐藏之前它不会触发，因为直到它完全隐藏，才会发生调整大小。这意味着在滚动时仍会显示间隙，但一旦地址栏被隐藏，则会填充间隙。

Answer 1

我会根据浏览器的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
    }

});

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

1 个答案: