javascriptを使用したフルスクリーンウェブサイト

Question

私はすべてのブラウザでフルスクリーンウェブサイト用に以下のコードを使用しています。しかし、私のコードは、クロールブラウザで自分のサイトをブラウズしてフルスクリーンにすると、フルスクリーンでプレビューされず、画面が狭くなっていました。あなたが理解していない場合

console.clear(); 
var elem = document.getElementById("fullScreen"); 
function requestFullScreen(elt) { 
    console.log("Requesting fullscreen for", elt); 
    if (elt.requestFullscreen) { 
     elt.requestFullscreen(); 
    } else if (elt.msRequestFullscreen) { 
     elt.msRequestFullscreen(); 
    } else if (elt.mozRequestFullScreen) { 
     elt.mozRequestFullScreen(); 
    } else if (elt.webkitRequestFullscreen) { 
     elt.webkitRequestFullscreen(); 
    } else { 
     console.error("Fullscreen not available"); 
    } 
} 
document.getElementById("Fullscreen").addEventListener("click", function() { 
    requestFullScreen( 
     document.getElementById("FullScreen") 
    ); 
}); 

が、ここでコメントしてください、私はより多くの情報を私のポストを更新します。

は、ここに私のコードです。ありがとう

Answer 1

あなたの入力に基づいて、私はのChrome & Firefoxでテストされているコードを添付しています。より良い理解のために、以下のコードを参考にしてください。

console.clear(); 
 
var elem = document.getElementById("fullScreen"); 
 

 
function requestFullScreen(elt) { 
 
    console.log("Requesting fullscreen for", elt); 
 
    if (elt.requestFullscreen) { 
 
    elt.requestFullscreen(); 
 
    } else if (elt.msRequestFullscreen) { 
 
    elt.msRequestFullscreen(); 
 
    } else if (elt.mozRequestFullScreen) { 
 
    elt.mozRequestFullScreen(); 
 
    } else if (elt.webkitRequestFullscreen) { 
 
    elt.webkitRequestFullscreen(); 
 
    } else { 
 
    console.error("Fullscreen not available"); 
 
    } 
 
} 
 
document.getElementById("fullScreen").addEventListener("click", function() { 
 
    requestFullScreen(elem); 
 
});

#fullScreen { 
 
    width: 100%; 
 
    min-height: 100px; 
 
    height: 100%; 
 
    border: 1px solid #666; 
 
    background-color: green; 
 
    cursor: pointer; 
 
}

<div id="fullScreen" title="Go Fullscreen"></div>

任意の実際のHTMLファイルにスニペットをコピーしてチェックしてみてください。ここでは動作しないかもしれません。 まだお気軽にご意見をお寄せください。

Answer 2

許可が拒否されたなどの理由で、Chromeがフルスクリーンに表示されないことがあります。

requestFullscreenを呼び出す前に、fullscreenerrorとfullscreenerrorイベントを設定する必要があります。このようにして、条件を調べて、Chromeがフルスクリーンにならない理由についての情報を得ることができます。

document.addEventListener("fullscreenerror ", function(event) { 

    console.log(event); 
});