打造全屏体验

我们能够轻松打造沉浸式全屏网站 但与网络上的任何应用一样，您有多种方法可以实现这一目的。 如今越来越多的浏览器支持“安装 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。
。

当您的应用全屏显示时，您将不再拥有浏览器的界面控件 可用的资源这将改变用户与 体验它们没有“前进”等标准导航控件 和向后他们却没有“刷新”按钮这一应急方法。时间是 来满足这种情况您可以借助一些 CSS 选择器 在浏览器进入时更改网站的样式和外观 全屏模式。

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

上面的示例有点人为制造：我把所有复杂的因素都隐藏在 供应商前缀的使用

实际代码要复杂得多。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 提示

全屏显示文档
<ph type="x-smartling-placeholder">
</ph> 全屏显示 body 元素
图 1：body 元素处于全屏模式。

您很自然地认为会让 body 元素进入全屏模式， 在基于 WebKit 或 Blink 的渲染引擎中，您会发现 将正文宽度缩减到尽可能小的尺寸，包含所有 内容。（Mozilla Gecko 没有问题。）

<ph type="x-smartling-placeholder">
</ph> 以全屏模式显示文档元素
图 2：文档元素处于全屏模式。

要解决此问题，请使用文档元素，而不是正文元素：

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> 元素未定义控件属性， 一旦用户进入全屏模式，便无法再控制视频。通过 推荐方法是使用一个用于封装视频的基本容器 您希望用户看到的控件

<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 来显示网页 内容。您可以决定网页是否以全屏模式显示 使用 window.navigator.standalone 只读布尔值 JavaScript 属性。

<ph type="x-smartling-placeholder"></ph> Apple

Android 版 Chrome 浏览器

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

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

您可以将自己的 Web 应用设置为向 Google Cloud 应用 设备的主屏幕，并且让应用以全屏“应用模式”启动使用 Android 版 Chrome 的“添加到主屏幕”。

<ph type="x-smartling-placeholder"></ph> Google Chrome 浏览器

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

网络应用清单（Chrome、Opera、Firefox、Samsung）

Web 应用的清单 是一个简单的 JSON 文件 开发者将能够控制您的应用在相应区域向用户显示的方式 希望看到应用（例如移动设备主屏幕）、直接 用户能启动什么，更重要的是，如何启动应用在 清单将会让你能够更好地控制自己的应用 我们只是重点介绍如何发布您的应用。具体而言：

  1. 将清单的相关信息告知浏览器
  2. 说明启动方式

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

<link rel="manifest" href="/manifest.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);

这个方法非常简单，网页加载并指示浏览器栏 让开它遗憾的是，它不仅未标准化， 支持。您还必须解决一系列的怪异行为。

例如，当用户访问网页时，浏览器通常会 便可返回到该文件夹使用 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 更改网址也会在 全屏体验。

如果您想让用户保持全屏体验，有以下两种选择：

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

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

window.history.go(-1);

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

没有什么比网站执行某些操作更让用户烦恼了。 意外情况。用户进入您的网站时，不要试图诱骗他们 全屏。

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

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

如果要以全屏模式启动应用，请考虑使用 不同平台的体验

不得滥发用户将应用安装到主屏幕

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

  • 谨慎小心。使用横幅或页脚告知他们可以安装 应用。
  • 如果用户关闭了提示，请勿再次显示。
  • 当用户首次访问时，他们不太可能想要安装应用，除非 他们对您的服务感到满意建议他们完成以下操作后 网站上的积极互动
  • 如果用户经常访问您的网站，但并未安装应用，他们 用户将来也不太可能安装您的应用不要不断向用户发送垃圾信息。

总结

虽然我们没有完全标准化和实现的 API， 您可以使用本文中提供的指导轻松打造 充分利用用户的整个屏幕，无论用户使用何种客户端。

反馈