Nuxt 3应用全屏模式背景色异常变黑问题求助

我在Nuxt3应用中添加了全屏按钮，功能已实现，但进入全屏模式后页面背景色会从白色变为黑色，不清楚原因。

我的app.vue代码 #

<template>
  <div id="main_screen">
    <header>
      <div>
        <nav>
          <NuxtLink to="/candidates" class="nav-button">Kandidaten</NuxtLink>
        </nav>
      </div>
      <div>
        <div class="flex flex-row place-items-center">
          <img class="logo" src="~/assets/img/Logo.svg" />
          <img
            src="~/assets/img/fullscreen.png"
            class="h-5 w-5 mx-5 cursor-pointer"
            @click="fullScreen"
          />
        </div>
      </div>
    </header>

    <main>
      <NuxtPage />
    </main>
  </div>
</template>

<script setup>
useHead({
  title: (titleChunk) => {
    return titleChunk ? `${titleChunk} | MyApp` : "MyApp";
  },
});

const isFullscreen = ref(false);

function fullScreen() {
  const fullscreen = document.querySelector("#main_screen");

  if (!isFullscreen.value) fullscreen.requestFullscreen();
  else document.exitFullscreen();

  isFullscreen.value = !isFullscreen.value;
}
</script>

页面状态说明 #

• 全屏前：页面边缘为白色，整体背景正常显示白色
• 全屏后：页面背景变为黑色，与之前的白色背景形成明显差异

解决方案 #

这个问题是因为浏览器在全屏模式下，默认会给全屏元素的上层（如html、body标签）设置黑色背景，而你的#main_screen元素可能没有占满整个视口高度，也没有明确设置背景色，导致继承了上层的黑色背景。

解决方法如下：

1. 给#main_screen元素添加样式，确保它占满视口高度并设置白色背景：

#main_screen {
  min-height: 100vh;
  background-color: #ffffff;
}

2. 为了增强兼容性，可以针对全屏状态单独设置样式：

#main_screen:fullscreen {
  background-color: #ffffff;
}

/* 兼容webkit内核浏览器 */
#main_screen:-webkit-full-screen {
  background-color: #ffffff;
}

原理：明确给全屏元素设置背景色后，浏览器会优先使用该元素的背景色，不会再继承上层的默认黑色背景，从而解决颜色变化的问题。

内容的提问来源于stack exchange，提问作者Aleksandra