モバイルブラウザでのビューポートの固定位置キャンバス

Question

canvas要素を使用して、ブラウザウィンドウのビューポート全体を背景としてカバーしたいと考えています。私は、canvasのwidthとheightを設定するためにJavascriptを使用しています。ページがスクロールしてアドレスバーが非表示になると問題が発生します。アドレスバーはスクロールしてページにギャップを残します。アドレスバーの移動にはeventがないようですので、アドレスバーが消えるとcanvasのサイズを再調整する方法はありません。私は3つのことを知って恩恵を受けることができます：

アドレスバーの移動/隠れを検出する方法はありますか？

すべての主要なブラウザで実際のビューポートの内側の寸法を一貫して取得する方法はありますか？

ビューポートの内部寸法の変化を検出するイベントリスナーを追加する方法はありますか？

EDIT：キャンバスがあることを意味し、サイズを変更し

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

：私は私のサイズ変更機能を変更

：

// 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：はここにいくつかのコードですアドレスバーが非表示になるとサイズ変更イベントが発生しますが、アドレスバーが表示されるまではサイズ変更イベントは発生しません完全に非表示になるまで、サイズ変更は行われないため、完全に隠されています。つまり、スクロール中はまだギャップが表示されていますが、アドレスバーが非表示になると表示されます。

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 
    } 

});