iPhone 全屏设置指南

什么是 iPhone 全屏模式？

iPhone 的“全屏模式”通常指在浏览网页、观看视频或使用某些 App 时，内容占据整个屏幕，隐藏状态栏（时间、电池图标）和地址栏等界面元素，以提供沉浸式体验。

虽然 iOS 系统本身对原生 App 的全屏控制有限，但通过 Safari 浏览器、PWA（渐进式 Web 应用）等方式，用户仍可实现类似效果。

在 Safari 中实现网页全屏

虽然 iOS 不支持传统意义上的 JavaScript 全屏 API（如 requestFullscreen），但可通过以下方式优化网页显示效果：

1. 确保网页采用响应式设计，适配 iPhone 屏幕尺寸。
2. 添加以下 meta 标签到 HTML 头部，防止用户缩放并控制视口：

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
      

其中 viewport-fit=cover 可让网页延伸至 iPhone 的刘海区域（适用于 iPhone X 及更新机型）。

将网页添加到主屏幕以获得类全屏体验

通过“添加到主屏幕”功能，可将网页作为 PWA 启动，启动时自动隐藏 Safari 地址栏，接近全屏效果：

• 打开 Safari，访问目标网站。
• 点击底部分享按钮（方框加箭头图标）。
• 选择“添加到主屏幕”。
• 确认名称后点击“添加”。
• 之后从主屏幕打开该网页，将不再显示 Safari 界面，呈现更沉浸的体验。

视频播放时的全屏

在 Safari 或其他 App 中播放视频时，点击播放器右下角的“全屏”按钮（↗️ 图标），即可进入横屏全屏模式。

注意：部分网页视频可能因开发者限制无法全屏，请确保视频标签包含 controls 和 webkit-playsinline="false" 属性。

常见问题

Q：为什么我的网页无法真正全屏？
A：iOS 出于安全和用户体验考虑，限制了 Web 全屏 API。目前最接近全屏的方式是通过“添加到主屏幕”启动 PWA。

Q：能否隐藏状态栏？
A：普通网页无法隐藏状态栏。只有通过 PWA 方式启动，且配合 viewport-fit=cover 才能将内容延伸至刘海区域，但状态栏文字仍会显示（系统自动调整颜色对比度）。