Chrome中全屏顯示的白色底部和頂部條

Question

我已經選擇Google，但還沒有找到解決方案或類似問題。 （也許今天是我的Google技能），但是我遇到了全屏問題。

我正在使用以下代碼讓我的網​​站全屏顯示。

function toggleFullscreen(elem) {
  elem = elem || document.documentElement;
  if (!document.fullscreenElement && !document.mozFullScreenElement &&
    !document.webkitFullscreenElement && !document.msFullscreenElement) {
    if (elem.requestFullscreen) {
      elem.requestFullscreen();
    } else if (elem.msRequestFullscreen) {
      elem.msRequestFullscreen();
    } else if (elem.mozRequestFullScreen) {
      elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) {
      elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }
}

但是，當全屏顯示時，您會在頂部看到一個白色的條，而在實際網站的下面看到一個白色的條，如下所示。

我已經嘗試了不同的解決方法，即在CSS中使用：full-screen並使用了不同的方法：html5或JavaScript。

在此處查看網站和CodePen上的問題。

謝謝您的寶貴時間，希望有人能回答這個非常煩人的問題。

Answer 1

將以下內容添加到您的css中

:-webkit-full-screen 
        {
            background-color: red;
        }

同樣，您可以添加moz和ms。

請檢查此鏈接以獲取更多詳細信息全屏API教程