将网站的主页以全屏方式显示

在某些展示类网站或企业官网中，用户希望将网站主页以全屏方式显示，提升视觉冲击力和用户体验。实现全屏展示的方式主要包括CSS布局调整和JavaScript控制两种。

一、使用CSS实现全屏布局

1. 基础结构设置

css

html, body { margin: 0; padding: 0; height: 100%; } .fullscreen-section { width: 100%; height: 100vh; /* 视口高度 */ display: flex; align-items: center; justify-content: center; background: #f5f5f5; }

2. 多个全屏板块滚动展示（适合单页网站）

可结合 scroll-snap-type 属性实现滚动吸附效果

css

.container { scroll-snap-type: y mandatory; overflow-y: scroll; height: 100vh; } .section { scroll-snap-align: start; height: 100vh; }

二、使用JavaScript控制全屏切换

适用于需要点击按钮进入/退出全屏模式的场景。

javascript

function enterFullscreen() { const elem = document.documentElement; if (elem.requestFullscreen) { elem.requestFullscreen(); } else if (elem.webkitRequestFullscreen) { /* Safari */ elem.webkitRequestFullscreen(); } } function exitFullscreen() { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } }

HTML调用示例：

html

<button onclick="enterFullscreen()">进入全屏</button> <button onclick="exitFullscreen()">退出全屏</button>

三、响应式设计适配不同设备

设备类型	适配建议
PC端	使用固定视口高度（100vh）保持全屏
移动端	注意 vh 单位兼容性，部分浏览器需使用 `window.innerHeight` 动态计算
多分辨率支持	结合媒体查询或flex/grid布局，保证不同屏幕比例下内容居中、比例自适应