javascript - Chrome 中全屏显示的白色底部和顶部栏

Question

我已经谷歌了我的屁股，但我还没有找到解决方案或类似的问题。 (也许这是我今天的 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。

Check out the website and problem on CodePen right here.

感谢您抽出时间，希望有人能解决这个非常烦人的问题。

Answer 1

将以下内容添加到您的 CSS 中

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

同样，您可以为 moz 和 ms 添加。

请查看此链接了解更多详情 Full Screen API Tutorial