我们能够轻松打造沉浸式全屏网站
但与网络上的任何应用一样，您有多种方法可以实现这一目的。
如今越来越多的浏览器支持“安装
Web 应用”启动全屏
让应用或网站进入全屏模式
用户或开发者可以通过多种方式让 Web 应用进入全屏模式。
为响应用户手势，请求浏览器进入全屏模式。
将应用安装到主屏幕。
弄虚作假：自动隐藏地址栏。
请求浏览器进入全屏模式以响应用户手势
平台不同。
iOS Safari 没有全屏 API，Android 上的 Chrome 则有全屏 API，
Firefox 和 IE 11+。您构建的大多数应用都会使用
JS API 和全屏规范提供的 CSS 选择器。主要
JS API 如下：
element.requestFullscreen()（目前在 Chrome、Firefox 和 IE 中添加前缀）
在全屏模式下显示元素。
document.exitFullscreen()（目前在 Chrome、Firefox 和 IE 中添加前缀。
Firefox 改用 cancelFullScreen()）取消全屏模式。
document.fullscreenElement（目前在 Chrome、Firefox 和 IE 中添加前缀）
如果有任何元素处于全屏模式，则返回 true。
。
注意 ：您会注意到，在带有前缀的版本中，“S”一词的大小写不一致。。这很不雅观，但也正是所实施的规范存在的问题。
当您的应用全屏显示时，您将不再拥有浏览器的界面控件
可用的资源这将改变用户与
体验它们没有“前进”等标准导航控件
和向后他们却没有“刷新”按钮这一应急方法。时间是
来满足这种情况您可以借助一些 CSS 选择器
在浏览器进入时更改网站的样式和外观
全屏模式。
上面的示例有点人为制造：我把所有复杂的因素都隐藏在
供应商前缀的使用
实际代码要复杂得多。Mozilla
已经创建了一个非常实用的脚本，您可以用它开启/关闭全屏模式。如
供应商前缀的情况很复杂
会更麻烦即使代码略微简化，
但它仍然很复杂。
function toggleFullScreen() {
var doc = window.document;
var docEl = doc.documentElement;
var requestFullScreen =
docEl.requestFullscreen ||
docEl.mozRequestFullScreen ||
docEl.webkitRequestFullScreen ||
docEl.msRequestFullscreen;
var cancelFullScreen =
doc.exitFullscreen ||
doc.mozCancelFullScreen ||
doc.webkitExitFullscreen ||
doc.msExitFullscreen;
if (
!doc.fullscreenElement &&
!doc.mozFullScreenElement &&
!doc.webkitFullscreenElement &&
!doc.msFullscreenElement
) {
requestFullScreen.call(docEl);
} else {
cancelFullScreen.call(doc);
}
}
我们网络开发者讨厌复杂性。一个实用的高级抽象 API
是 Sindre Sorhus 的 Screenfull.js 模块
它将两个略有不同的 JS API 和供应商前缀合并为一个
一致的 API。
全屏 API 提示
全屏显示文档
图 1：body 元素处于全屏模式。
您很自然地认为会让 body 元素进入全屏模式，
在基于 WebKit 或 Blink 的渲染引擎中，您会发现
将正文宽度缩减到尽可能小的尺寸，包含所有
内容。（Mozilla Gecko 没有问题。）
图 2：文档元素处于全屏模式。
要解决此问题，请使用文档元素，而不是正文元素：
document.documentElement.requestFullscreen();
使视频元素全屏显示
让视频元素全屏显示的方法与让其他任何元素
元素全屏显示。您对视频调用 requestFullscreen 方法
元素。
如果您的
一旦用户进入全屏模式，便无法再控制视频。通过
推荐方法是使用一个用于封装视频的基本容器
您希望用户看到的控件
这种做法的灵活性更高
对象与 CSS 伪选择器相关联（例如，隐藏“goFS”按钮）。
通过使用这些模式，您可以检测全屏模式是否运行，并据以调整
界面，例如：
提供返回初始页的链接
提供一种关闭对话框或回退的机制
从主屏幕以全屏模式启动网页
您无法在用户导航至该网页时启动全屏网页。
浏览器供应商非常清楚，每次网页加载时都有全屏体验
是个巨大的麻烦，因此需要用户手势才能进入全屏模式。
供应商允许用户“安装”而安装这一操作
它向操作系统发出信号，表明用户希望在
平台。
在各大移动平台上，使用以下任一方法很容易实现
元标记或清单文件。
iOS
自从 iPhone 发布以来，用户就能够安装 Web 应用
主屏幕，并让它们作为全屏 Web 应用启动。
如果 content 设置为 yes，则 Web 应用会在全屏模式下运行；
否则不会。默认行为是使用 Safari 来显示网页
内容。您可以决定网页是否以全屏模式显示
使用 window.navigator.standalone 只读布尔值 JavaScript 属性。
Apple
Android 版 Chrome 浏览器
Chrome 团队最近实施了一项功能，可指示浏览器
在用户将页面添加到主屏幕后以全屏模式启动页面。时间是
类似于 iOS Safari 模式。
您可以将自己的 Web 应用设置为向 Google Cloud 应用
设备的主屏幕，并且让应用以全屏“应用模式”启动使用
Android 版 Chrome 的“添加到主屏幕”。
Google Chrome 浏览器
更好的选择是使用 Web 应用清单。
网络应用清单（Chrome、Opera、Firefox、Samsung）
Web 应用的清单
是一个简单的 JSON 文件
开发者将能够控制您的应用在相应区域向用户显示的方式
希望看到应用（例如移动设备主屏幕）、直接
用户能启动什么，更重要的是，如何启动应用在
清单将会让你能够更好地控制自己的应用
我们只是重点介绍如何发布您的应用。具体而言：
将清单的相关信息告知浏览器
说明启动方式
创建清单并将其托管在您的网站上后
只需在包含您应用的所有网页中添加一个链接标记，如下所示：
从 Android 版本 38（2014 年 10 月）开始，Chrome 就开始支持清单
这样，您就可以控制您的 Web 应用在安装后的显示方式
添加到主屏幕（通过 short_name、name 和 icons 属性）及其
应在用户点击启动图标（通过 start_url、
display 和 orientation）。
示例清单如下所示。它只能显示
清单。
{
"short_name": "Kinlan's Amaze App",
"name": "Kinlan's Amazing Application ++",
"icons": [
{
"src": "launcher-icon-4x.png",
"sizes": "192x192",
"type": "image/png"
}
],
"start_url": "/index.html",
"display": "standalone",
"orientation": "landscape"
}
此功能是完全渐进式，可让您创建更好、更多的内容，
为支持该功能的浏览器用户提供集成体验。
当用户将您的网站或应用添加到主屏幕时，
让用户将其视为应用也就是说，您应引导用户前往
应用的功能，而不是商品着陆页。例如：
如果用户需要登录您的应用，那么这个页面就是一个不错的选择，
。
实用工具应用
大多数实用程序应用都将立即受益于此。对于
那么您可能希望它们像其他所有应用一样独立启动
在移动平台上展示如需指示应用独立启动，请将以下内容添加到 Web
应用清单：
"display": "standalone"
游戏
大多数游戏将立即受益于清单。广袤的
大多数游戏都希望以全屏模式启动，并强制特定
屏幕方向。
如果您正在开发纵向滚动游戏或《Flappy Birds》这样的游戏
则很可能希望游戏始终采用竖屏模式
"display": "fullscreen",
"orientation": "portrait"
另一方面，如果您开发的是益智游戏或 X-Com 之类的游戏，
那么可能希望游戏始终采用横向模式。
"display": "fullscreen",
"orientation": "landscape"
新闻网站
新闻网站在大多数情况下都是纯基于内容的体验。大多数开发者
一般不会想到为新闻网站添加清单。清单
可让您定义要发布的内容（新闻网站的头版）和
启动方式（全屏或以正常浏览器标签页的形式启动）。
具体选择哪种方法，取决于您，以及您认为用户喜欢以何种方式访问您的
体验如果您希望自己的网站拥有
那么可以将显示设置为 browser。
"display": "browser"
如果您希望自己的新闻网站看起来像大多数以新闻为中心的应用，
体验，并从界面中移除所有与网络类似的 Chrome，
为此，请将 display 设置为 standalone。
"display": "standalone"
弄虚作假：自动隐藏地址栏
您可以“伪装全屏模式”自动隐藏地址栏，如下所示：
window.scrollTo(0, 1);
注意 ：注意：我以朋友身份告诉您。它存在。虽然是个问题，但其实是个黑客行为。请不要使用。- Paul
这个方法非常简单，网页加载并指示浏览器栏
让开它遗憾的是，它不仅未标准化，
支持。您还必须解决一系列的怪异行为。
例如，当用户访问网页时，浏览器通常会
便可返回到该文件夹使用 window.scrollTo 会覆盖此设置，这会带来麻烦
用户。为了解决此问题，您必须将最后一个位置
localStorage 并处理边缘情况（例如，如果用户
网页在多个窗口中打开）。
用户体验指南
在构建充分利用全屏的网站时
您可能需要注意的一些潜在用户体验变化
构建用户喜爱的服务
不依赖导航控件
iOS 没有硬件返回按钮或刷新手势。因此，您必须
确保用户能够在应用内顺畅导航，而不会遭到锁定。
您可以检测设备是在全屏模式还是安装模式下运行
在所有主流平台上都能轻松实现
iOS
在 iOS 上，您可以使用 navigator.standalone 布尔值来查看用户是否
从主屏幕启动。
if (navigator.standalone == true) {
// My app is installed and therefore fullscreen
}
网络应用清单（Chrome、Opera、Samsung）
作为安装版应用启动时，Chrome 并非在真正的全屏模式下运行
因此 document.fullscreenElement 会返回 null 和 CSS 选择器
无效。
当用户在您的网站上通过手势请求全屏显示时，标准的
可以使用全屏 API，其中包括 CSS 伪选择器，
调整界面以响应全屏状态，如下所示
selector:-webkit-full-screen {
display: block; // displays the element only when in fullscreen
}
selector {
display: none; // hides the element when not in fullscreen mode
}
如果用户从主屏幕启动您的网站，display-mode 媒体
查询将设置为在网络应用清单中定义的内容。如果
会：
@media (display-mode: fullscreen) {
}
如果用户在独立模式下启动应用，则 display-mode
媒体查询将为 standalone：
@media (display-mode: standalone) {
}
Firefox
当用户通过您的网站请求全屏显示，或用户启动应用时
在全屏模式下可以使用所有标准全屏 API，包括
CSS 伪选择器，可让您调整界面以响应全屏状态
如下所示：
selector:-moz-full-screen {
display: block; // hides the element when not in fullscreen mode
}
selector {
display: none; // hides the element when not in fullscreen mode
}
Internet Explorer
在 IE 中，CSS 伪类缺少连字符，但在其他方面的工作方式与
Chrome 和 Firefox。
selector:-ms-fullscreen {
display: block;
}
selector {
display: none; // hides the element when not in fullscreen mode
}
规范
规范中的拼写与 IE 使用的语法一致。
selector:fullscreen {
display: block;
}
selector {
display: none; // hides the element when not in fullscreen mode
}
让用户保持全屏体验
有时全屏 API 可能有点讲究。浏览器供应商不希望
将用户锁定在全屏页面中，这样他们就开发出了
请尽快退出全屏模式也就是说，您无法构建
跨越多个页面的全屏网站，原因如下：
使用 window.location = "http://example.com" 以编程方式更改网址会突破全屏。
用户点击您页面内的外部链接时将会退出全屏模式。
通过 navigator.pushState API 更改网址也会在
全屏体验。
如果您想让用户保持全屏体验，有以下两种选择：
使用可安装的 Web 应用机制进入全屏模式。
使用 # fragment 管理界面和应用状态。
使用 #syntax 更新网址 (window.location = "#somestate")，并且
window.onhashchange 事件后，您可以使用浏览器自己的
历史记录堆栈来管理应用状态的变化，并允许用户使用
或提供简单的程序化返回按钮
使用 history API 来获得更棒的体验，具体如下所示：
window.history.go(-1);
让用户选择何时进入全屏模式
没有什么比网站执行某些操作更让用户烦恼了。
意外情况。用户进入您的网站时，不要试图诱骗他们
全屏。
不拦截第一个触摸事件并调用 requestFullscreen()。
这很烦人。
浏览器可能决定在未来某个时间提示用户
允许应用占据全屏模式。
如果要以全屏模式启动应用，请考虑使用
不同平台的体验
不得滥发用户将应用安装到主屏幕
如果您计划通过安装式应用机制提供全屏体验
为用户着想。
谨慎小心。使用横幅或页脚告知他们可以安装
应用。
如果用户关闭了提示，请勿再次显示。
当用户首次访问时，他们不太可能想要安装应用，除非
他们对您的服务感到满意建议他们完成以下操作后
网站上的积极互动
如果用户经常访问您的网站，但并未安装应用，他们
用户将来也不太可能安装您的应用不要不断向用户发送垃圾信息。
总结
虽然我们没有完全标准化和实现的 API，
您可以使用本文中提供的指导轻松打造
充分利用用户的整个屏幕，无论用户使用何种客户端。
反馈