打造全屏体验

我们能够轻松制作沉浸式全屏网站和应用，但与网络上的任何事物一样，有几种方法可以做到这一点。 现在，越来越多的浏览器支持全屏启动的“已安装的 Web 应用”体验，这一点尤为重要。

将应用或网站设为全屏

用户或开发者可以通过多种方式让 Web 应用全屏显示。

  • 请求浏览器在响应用户手势时进入全屏模式。
  • 将应用安装到主屏幕。
  • 伪装：自动隐藏地址栏。

请求浏览器在响应用户手势时进入全屏模式

并非所有平台都相同。iOS Safari 没有全屏 API，但我们在 Android 版 Chrome、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。

当应用处于全屏模式时，您将无法再使用浏览器的界面控件。这会改变用户与您的体验互动的方式。它们没有标准的导航控件（例如“前进”和“后退”），也没有“刷新”按钮这一逃生舱口。请务必考虑这种情况。您可以使用一些 CSS 选择器，在浏览器进入全屏模式时更改网站的样式和呈现方式。

<button id="goFS">Go fullscreen</button>
<script>
  var goFS = document.getElementById('goFS');
  goFS.addEventListener(
    'click',
    function () {
      document.body.requestFullscreen();
    },
    false,
  );
</script>

上面的示例有点牵强；我隐藏了与使用供应商前缀相关的所有复杂性。

实际代码要复杂得多。Mozilla 创建了一个非常实用的脚本，您可以使用它来切换全屏。如您所见，与指定 API 相比，供应商前缀的情况复杂且繁琐。即使使用下面稍微简化的代码，它仍然很复杂。

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);
  }
}

我们 Web 开发者讨厌复杂性。您可以使用的不错的高级抽象 API 是 Sindre Sorhus 的 Screenfull.js 模块，该模块将两个略有不同的 JS API 和供应商前缀统一为一个一致的 API。

Fullscreen API 提示

正在将文档设为全屏
在 body 元素上全屏显示
图 1：body 元素上的全屏。

您自然会想到将 body 元素全屏显示，但如果您使用的是基于 WebKit 或 Blink 的渲染引擎，您会发现它会产生一种奇怪的效果，即 body 宽度会缩小到能容纳所有内容的最小尺寸。（Mozilla Gecko 没问题。）

在文档元素上全屏显示
图 2：文档元素上的全屏。

如需解决此问题，请使用 document 元素，而不是 body 元素：

document.documentElement.requestFullscreen();
将视频元素设为全屏

使视频元素全屏显示与使任何其他元素全屏显示完全相同。您对视频元素调用 requestFullscreen 方法。

<video id="videoElement"></video>
<button id="goFS">Go Fullscreen</button>
<script>
  var goFS = document.getElementById('goFS');
  goFS.addEventListener(
    'click',
    function () {
      var videoElement = document.getElementById('videoElement');
      videoElement.requestFullscreen();
    },
    false,
  );
</script>

如果 <video> 元素未定义 controls 属性，用户在全屏模式下将无法控制视频。建议的方法是使用一个基本容器来封装视频和您希望用户看到的控件。

<div id="container">
  <video></video>
  <div>
    <button>Play</button>
    <button>Stop</button>
    <button id="goFS">Go fullscreen</button>
  </div>
</div>
<script>
  var goFS = document.getElementById('goFS');
  goFS.addEventListener(
    'click',
    function () {
      var container = document.getElementById('container');
      container.requestFullscreen();
    },
    false,
  );
</script>

这为您提供了更大的灵活性，因为您可以将容器对象与 CSS 伪选择器结合使用（例如，隐藏“goFS”按钮）。

<style>
  #goFS:-webkit-full-screen #goFS {
    display: none;
  }
  #goFS:-moz-full-screen #goFS {
    display: none;
  }
  #goFS:-ms-fullscreen #goFS {
    display: none;
  }
  #goFS:fullscreen #goFS {
    display: none;
  }
</style>

使用这些模式，您可以检测全屏模式何时运行，并相应地调整界面，例如：

  • 提供返回起始页的链接
  • 提供关闭对话框或返回上一级界面的机制

从主屏幕启动全屏页面

无法在用户导航到全屏网页时启动该网页。 浏览器供应商非常清楚，每次网页加载时都进入全屏体验会给用户带来极大困扰，因此需要用户手势才能进入全屏。不过，供应商确实允许用户“安装”应用，而安装行为会向操作系统发出信号，表明用户希望在平台上作为应用启动。

在各大移动平台上，使用元标记或清单文件（如下所示）可以非常轻松地实现。

iOS

自 iPhone 推出以来，用户一直能够将 Web 应用安装到主屏幕，并将其作为全屏 Web 应用启动。

<meta name="apple-mobile-web-app-capable" content="yes" />

如果 content 设置为 yes，则 Web 应用会以全屏模式运行；否则，不会以全屏模式运行。默认行为是使用 Safari 显示 Web 内容。您可以使用 window.navigator.standalone 只读布尔值 JavaScript 属性来确定网页是否以全屏模式显示。

Apple

Android 版 Chrome 浏览器

Chrome 团队最近实现了一项功能，该功能可指示浏览器在用户将页面添加到主屏幕后以全屏模式启动该页面。它类似于 iOS Safari 模型。

<meta name="mobile-web-app-capable" content="yes" />

您可以设置 Web 应用，使其在设备的主屏幕上添加应用快捷方式图标，并使用 Chrome for Android 的“添加到主屏幕”菜单项在全屏“应用模式”下启动应用。

Google Chrome

更好的选择是使用 Web 应用清单。

Web 应用清单（Chrome、Opera、Firefox、Samsung）

Web 应用清单是一个简单的 JSON 文件，可让您（开发者）控制应用在用户希望看到应用的区域（例如移动设备主屏幕）中的显示方式，指示用户可以启动的内容，更重要的是，指示用户可以如何启动它。未来，清单将让您能够更好地控制应用，但此时此刻我们只关注如何启动应用。具体而言：

  1. 向浏览器告知您的清单
  2. 描述如何启动

创建清单并将其托管在您的网站上后，您只需从包含应用的所有网页中添加一个链接标记，如下所示：

<link rel="manifest" href="/manifest.json" />

Chrome 自 Android 版 38（2014 年 10 月）起便支持清单，它让您可以控制 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"
新闻网站

在大多数情况下，新闻网站都是纯内容型体验。大多数开发者自然不会想到为新闻网站添加清单。通过清单，您可以定义要启动的内容（新闻网站的首页）以及启动方式（全屏或作为普通浏览器标签页）。

具体选择取决于您，以及您认为用户会喜欢以何种方式访问您的体验。如果您希望网站具有您期望网站具有的所有浏览器 Chrome，可以将显示设置为 browser。

    "display": "browser"

如果您希望自己的新闻网站像大多数以新闻为中心的应用一样，将体验视为应用，并从界面中移除所有类似 Web 的 Chrome，则可以通过将 display 设置为 standalone 来实现。

    "display": "standalone"

伪装：自动隐藏地址栏

您可以通过自动隐藏地址栏来“伪全屏”，如下所示：

window.scrollTo(0, 1);

这是一种非常简单的方法，即网页加载并告知浏览器栏隐藏。遗憾的是，它尚未标准化，也未得到很好的支持。您还必须解决一系列问题。

例如，当用户返回到某个网页时，浏览器通常会恢复该网页上的位置。使用 window.scrollTo 会替换此设置，这会惹恼用户。为了解决这个问题，您必须将最后的位置存储在 localStorage 中，并处理极端情况（例如，如果用户在多个窗口中打开了该页面）。

用户体验指南

在构建利用全屏的网站时，您需要注意一些潜在的用户体验变化，以便能够构建用户喜爱的服务。

不要依赖导航控件

iOS 没有硬件返回按钮或刷新手势。因此，您必须确保用户可以在整个应用中导航，而不会被锁定。

您可以在所有主要平台上轻松检测应用是在全屏模式下运行，还是在已安装模式下运行。

iOS

在 iOS 上，您可以使用 navigator.standalone 布尔值来查看用户是否从主屏幕启动了应用。

if (navigator.standalone == true) {
  // My app is installed and therefore fullscreen
}

Web 应用清单（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 媒体查询将设置为 Web 应用清单中定义的值。在纯全屏模式下，它将是：

@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 更改网址也会退出全屏体验。

如果您想让用户保持全屏体验，可以采用以下两种方法：

  1. 使用可安装的 Web 应用机制进入全屏模式。
  2. 使用 # fragment 管理界面和应用状态。

通过使用 # 语法更新网址 (window.location = "#somestate") 并监听 window.onhashchange 事件，您可以使用浏览器自己的历史记录堆栈来管理应用状态的变化，允许用户使用其硬件返回按钮，或使用历史记录 API 提供简单的程序化返回按钮体验，如下所示：

window.history.go(-1);

让用户选择何时进入全屏模式

对用户而言，最令人讨厌的事情莫过于网站执行了非预期的操作。当用户访问您的网站时，请勿尝试诱骗他们进入全屏模式。

不拦截第一个触摸事件，并调用 requestFullscreen()。

  1. 这很烦人。
  2. 浏览器可能会在未来某个时间点决定提示用户是否允许应用进入全屏模式。

如果您想以全屏模式启动应用，请考虑使用每个平台的安装体验。

请勿向用户发送垃圾内容，诱导其将应用安装到主屏幕

如果您计划通过安装式应用机制提供全屏体验，请为用户着想。

  • 谨慎行事。使用横幅或页脚告知用户可以安装应用。
  • 如果用户关闭了提示，请勿再次显示。
  • 用户在首次访问时不太可能想要安装应用，除非他们对您的服务感到满意。不妨考虑在用户与您的网站进行积极互动后，提示他们安装应用。
  • 如果用户经常访问您的网站，但没有安装应用，那么他们以后也不太可能安装您的应用。请勿持续向其发送垃圾内容。

总结

虽然我们没有完全标准化和实现的 API，但通过使用本文中介绍的一些指南，您可以轻松构建利用用户整个屏幕的体验，而无需考虑客户端。

反馈