三种常见的“全屏”效果
- 浏览器全屏模式：整个浏览器窗口占据整个用户的屏幕，就像看视频或玩游戏一样,这是最彻底的全屏。
- 视口全屏（如背景图）铺满整个浏览器窗口，但浏览器自身的工具栏、地址栏等依然可见，这是最常见的需求，比如制作一个欢迎页或 landing page。
- 元素全屏：页面中的某一个特定元素（如图片、视频、 div）独立进行全屏显示。
真正的浏览器全屏模式
这种模式会让你的网页独占整个屏幕，隐藏操作系统任务栏、浏览器菜单栏等，这通常由用户主动触发（例如点击一个按钮），因为出于安全考虑,网页脚本不能自动强制浏览器全屏。
（图片来源网络，侵删）
实现步骤：
- HTML: 创建一个触发全屏的按钮，并给需要全屏的元素（通常是
body或整个页面容器）一个id。 - CSS: 设置该元素的高度为
100%,确保它能填满浏览器视口。 - JavaScript: 使用 Fullscreen API 来控制全屏。
代码示例：
HTML
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">浏览器全屏示例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>点击下方按钮进入全屏模式</h1>
<button id="fullscreenBtn">进入全屏</button>
<script src="script.js"></script>
</body>
</html>
CSS (style.css)
/* 确保 body 和 html 高度是 100% */
html, body {
height: 100%;
margin: 0;
padding: 0;
background-color: #282c34;
color: white;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
JavaScript (script.js)
const fullscreenBtn = document.getElementById('fullscreenBtn');
// 进入全屏的函数
function openFullscreen() {
const elem = document.documentElement; // 获取 html 元素
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) { /* Safari */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE11 */
elem.msRequestFullscreen();
}
}
// 退出全屏的函数
function closeFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) { /* Safari */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE11 */
document.msExitFullscreen();
}
}
// 监听按钮点击事件
fullscreenBtn.addEventListener('click', () => {
// 如果已经全屏，则退出；否则进入
if (!document.fullscreenElement) {
openFullscreen();
fullscreenBtn.textContent = '退出全屏';
} else {
closeFullscreen();
fullscreenBtn.textContent = '进入全屏';
}
});
// 监听全屏状态变化事件
document.addEventListener('fullscreenchange', () => {
if (!document.fullscreenElement) {
fullscreenBtn.textContent = '进入全屏';
}
});
内容铺满整个视口（最常用）
特别是背景）能填满浏览器窗口，不出现滚动条，但浏览器界面本身不变，这主要通过 CSS 来实现。
（图片来源网络，侵删）
核心技巧：
height: 100vh:vh(viewport height) 单位表示视口高度的 1%。100vh就是整个视口的高度。width: 100vw:vw(viewport width) 单位表示视口宽度的 1%。100vw就是整个视口的宽度。background-size: cover: 让背景图片自动调整大小，以覆盖整个元素,可能会裁剪图片。background-size: contain: 让背景图片自动调整大小，以完整显示在元素内,可能会留有空白。
代码示例：
HTML
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">视口全屏示例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="fullscreen-content">
<h1>这是一个铺满整个视口的页面</h1>
<p>向下滚动查看更多内容...</p>
</div>
<div class="another-section">
<h2>下一个部分</h2>
<p>这个部分的内容会正常显示。</p>
</div>
</body>
</html>
CSS (style.css)
/* 重置默认样式 */
html, body {
margin: 0;
padding: 0;
height: 100%; /* 确保父元素有明确高度 */
}
/* 让第一个内容区铺满整个视口 */
.fullscreen-content {
height: 100vh; /* 关键：使用 vh 单位 */
width: 100vw; /* 关键：使用 vw 单位 */
background-image: url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?q=80&w=1974&auto=format&fit=crop');
background-size: cover; /* 背景图片覆盖整个区域 */
background-position: center;
display: flex;
justify-content: center;
align-items: center;
color: white;
text-align: center;
}
/* 第二个部分正常显示 */
.another-section {
padding: 50px;
text-align: center;
background-color: #f0f0f0;
}
让特定元素全屏
有时候我们只想让页面上的某个图片、视频或某个模块全屏显示，这同样使用 Fullscreen API，但目标元素不是 document.documentElement，而是具体的 DOM 元素。
代码示例：
HTML
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">元素全屏示例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>点击图片使其全屏</h1>
<img id="myImage" src="https://images.unsplash.com/photo-1543857778-c4a1a569e7bd?q=80&w=1974&auto=format&fit=crop" alt="可全屏的图片">
<script src="script.js"></script>
</body>
</html>
JavaScript (script.js)
const myImage = document.getElementById('myImage');
myImage.addEventListener('click', () => {
// 如果图片已经不在全屏状态，则使其全屏
if (!document.fullscreenElement) {
if (myImage.requestFullscreen) {
myImage.requestFullscreen();
} else if (myImage.webkitRequestFullscreen) { /* Safari */
myImage.webkitRequestFullscreen();
} else if (myImage.msRequestFullscreen) { /* IE11 */
myImage.msRequestFullscreen();
}
} else {
// 如果已经全屏，则退出
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
});
// 监听全屏变化，可以在这里做一些状态反馈
document.addEventListener('fullscreenchange', () => {
console.log('全屏状态已改变', document.fullscreenElement);
});
总结与选择
| 需求场景 | 推荐方法 | 关键技术 |
|---|---|---|
| 需要一个独立的、沉浸式的体验（如游戏、视频演示） | 浏览器全屏模式 | requestFullscreen(), exitFullscreen(), vh/vw (辅助) |
| 制作欢迎页、Banner、Landing Page，让背景/首屏内容占满窗口 | 内容铺满视口 | height: 100vh;, width: 100vw;, background-size: cover |
| 让页面上的某个组件（如图片、地图）独立全屏查看 | 元素全屏 | 对特定元素调用 element.requestFullscreen() |
根据你的具体设计目标，选择最适合的方法即可，对于大多数设计师和开发者来说，方法二（视口全屏） 是最常用和最基础的。
