网页全屏(fullscreen)是什么:全屏背景与幻灯片如何实现、何时使用

网页里的"全屏"通常指两件不同的事:一是让某个元素真正占满整个屏幕、隐藏浏览器界面的 Fullscreen API;二是视觉上"看起来铺满一屏"的全屏布局,比如全屏背景图和全屏幻灯片。前者靠 JavaScript 调用浏览器能力,后者靠 CSS 的尺寸与定位。判断用哪种,取决于你要的是"沉浸式观看"还是"页面首屏的视觉冲击"。下面分别讲清机制、实现方式和取舍。

两种"全屏"不是一回事

维度 Fullscreen API(真全屏) 全屏布局(视觉全屏)
触发方式 JS 调用 requestFullscreen() 纯 CSS,无需 JS
效果 隐藏地址栏、标签栏等浏览器界面 元素占满视口,浏览器界面仍在
典型场景 视频播放、图片查看器、演示 首屏背景图、全屏幻灯片、落地页
退出方式 Esc 键或 exitFullscreen() 正常滚动/切换
兼容性关注点 需要用户手势触发,各浏览器前缀历史遗留 视口单位与移动端地址栏

多数"全屏背景/幻灯片"需求属于第二类,不需要 Fullscreen API。只有当用户要沉浸式看内容(比如点开大图、播放视频)时,才用第一类。

全屏背景图怎么实现

核心是让背景元素铺满视口,同时保证图片不变形、内容可读。

.hero {
  min-height: 100vh;              /* 至少占满一屏高度 */
  background-image: url("bg.jpg");
  background-size: cover;         /* 铺满且保持比例,多余部分裁掉 */
  background-position: center;    /* 居中裁切,主体不易被切掉 */
  background-repeat: no-repeat;
}

几个关键点:

  • background-size: cover 保证铺满,代价是图片边缘可能被裁;contain 保证完整显示,代价是可能留白。首屏背景一般选 cover。
  • background-position: center 让裁切从中心开始,主体居中的图更安全。
  • 文字叠在图上时,加一层半透明遮罩或渐变,否则浅色图上白字会看不清。

全屏幻灯片的基本思路

幻灯片本质是"多张全屏图 + 切换机制"。切换可以纯 CSS(定时动画)或 JS 控制。

简单做法是把每张图作为一层,用透明度过渡:

.slide {
  position: absolute;
  inset: 0;                       /* 铺满容器 */
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s;
}
.slide.active { opacity: 1; }

JS 只需定时切换 .active 类。要点:

  • 容器设 position: relative 并占满一屏,子层用绝对定位叠放。
  • 用 opacity 过渡比直接换 background-image 更平滑,也更容易做淡入淡出。
  • 首张图之外的图片延迟加载,避免一进页面就下载全部大图。

移动端的常见坑

移动端"全屏"最容易出问题的地方在视口高度和地址栏。

  • 100vh 在移动浏览器里通常按"地址栏收起时的最大高度"计算,地址栏可见时内容会被顶出屏幕,出现滚动条或底部被裁。可用 100dvh(动态视口高度)替代,或退而用 min-height: 100vh 配合内容自适应。
  • 地址栏随滚动收起/展开会导致视口高度变化,依赖 100vh 的固定布局会跳动。
  • 全屏背景图在移动端流量和内存开销更大,建议按屏幕宽度提供较小尺寸的图,而不是直接下发桌面大图。

什么时候该用,什么时候别用

适合全屏的场景:

  • 首屏需要强视觉冲击的落地页、品牌页。
  • 图片浏览、视频播放这类需要沉浸式观看的场景(可用 Fullscreen API)。
  • 内容本身以图为主、文字为辅的展示页。

应避免或谨慎使用的场景:

  • 正文阅读页:全屏背景会干扰阅读,文字对比度难保证。
  • 表单、操作密集的页面:全屏布局挤压可用空间,反而降低效率。
  • 移动端且图片很大的页面:全屏大图会拖慢首屏加载,影响体验。

判断标准很简单:全屏是否服务于内容。如果全屏只是"看起来酷",却让用户更难读到信息或更慢加载,就不值得。

可读性与性能的取舍

  • 可读性:全屏背景上的文字必须有足够对比度,加遮罩、加阴影或改用纯色块承载文字。
  • 性能:全屏图是首屏最大的资源之一,压缩、按需加载、提供多尺寸版本能明显改善加载。
  • 交互:全屏幻灯片若自动播放,应提供暂停或手动切换,避免用户来不及看清就切走。

小结

"fullscreen"在网页里分两层:Fullscreen API 用于真正的沉浸式全屏,全屏布局用于视觉上铺满一屏。全屏背景靠 background-size: cover 加 background-position: center 实现,全屏幻灯片靠绝对定位叠层加透明度过渡。移动端重点处理 100vh 与地址栏的问题,优先用 100dvh。是否使用全屏,取决于它是否让内容更好读、加载更顺畅,而不是单纯追求视觉效果。

cera.lt