打造全屏体验

admin web前端 暂无评论 151 浏览

我们有能力轻松制作身临其境的全屏网站和应用程序，但与网络上的任何内容一样，有几种方法可以做到这一点。现在这一点尤其重要，因为越来越多的浏览器支持启动全屏的“已安装的网络应用程序”体验。

让你的应用程序或网站全屏显示#

用户或开发人员可以通过多种方式获得全屏 Web 应用程序。

  • 请求浏览器进入全屏以响应用户手势。
  • 将应用程序安装到主屏幕。
  • 假装：自动隐藏地址栏。

请求浏览器进入全屏以响应用户手势#

并非所有平台都是平等的。iOS Safari 没有全屏 API，但我们在 Android、Firefox 和 IE 11+ 上的 Chrome 上有。您构建的大多数应用程序将结合使用全屏规范提供的 JS API 和 CSS 选择器。构建全屏体验时需要关注的主要 JS API 是：

  • element.requestFullscreen()（目前在 Chrome、Firefox 和 IE 中有前缀）以全屏模式显示元素。
  • document.exitFullscreen()（目前在 Chrome、Firefox 和 IE 中有前缀。FirefoxcancelFullScreen()改为使用）取消全屏模式。
  • document.fullscreenElement（目前在 Chrome、Firefox 和 IE 中有前缀）如果任何元素处于全屏模式，则返回 true。

当您的应用全屏显示时，您将无法再使用浏览器的 UI 控件。这改变了用户与您的体验互动的方式。他们没有标准的导航控件，例如前进和后退；他们没有他们的逃生舱口，即刷新按钮。满足这种情况很重要。当浏览器进入全屏模式时，您可以使用一些 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 中。

全屏 API 提示#

使文档全屏显示#
身体元素全屏
图 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 属性确定网页是否以全屏模式显示。

苹果

安卓版 Chrome #

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

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

您可以将网络应用程序设置为将应用程序快捷方式图标添加到设备的主屏幕，并使用 Chrome for Android 的“添加到主屏幕”菜单项让应用程序以全屏“应用程序模式”启动。

谷歌浏览器

更好的选择是使用 Web App Manifest。

Web 应用程序清单（Chrome、Opera、Firefox、三星）#

Web 应用程序的清单是一个简单的 JSON 文件，开发人员可以通过它来控制您的应用程序在用户希望看到的区域（例如移动主屏幕）中的显示方式，直接显示用户可以启动，更重要的是，他们如何启动它。将来，清单会让您对您的应用程序有更多的控制权，但现在我们只关注如何启动您的应用程序。具体来说：

  1. 告诉浏览器你的清单
  2. 描述如何启动

一旦您创建了清单并将其托管在您的网站上，您需要做的就是从包含您的应用程序的所有页面添加一个链接标签，如下所示：

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

Chrome 自 Android 版本 38（2014 年 10 月）起就支持 Manifests，它使您可以控制网络应用程序在安装到主屏幕时的显示方式（通过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"

如果您希望您的新闻站点感觉大多数以新闻为中心的应用程序将其体验视为应用程序并从 UI 中删除所有类似 Web 的 chrome，您可以通过将显示设置为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、三星）#

作为已安装的应用程序启动时，Chrome 并没有以真正的全屏体验运行，因此document.fullscreenElement返回 null 并且 CSS 选择器不起作用。

当用户通过您网站上的手势请求全屏时，可以使用标准的全屏 API，包括 CSS 伪选择器，它可以让您调整 UI 以响应全屏状态，如下所示

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

火狐#

当用户通过您的站点请求全屏或用户以全屏模式启动应用程序时，所有标准的全屏 API 都可用，包括 CSS 伪选择器，它可以让您调整 UI 以响应全屏状态，如下所示：

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
}

互联网浏览器#

在 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"通过使用breaks out of fullscreen以编程方式更改 URL 。
  • 用户单击您页面内的外部链接将退出全屏。
  • 通过 API 更改 URLnavigator.pushState也会打破全屏体验。

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

  1. 使用可安装的网络应用程序机制进入全屏。
  2. 使用 # 片段管理您的 UI 和应用程序状态。

通过使用#syntax 来更新 url (window.location = "#somestate")，并监听window.onhashchange事件你可以使用浏览器自己的历史堆栈来管理应用程序状态的变化，允许用户使用他们的硬件后退按钮，或使用历史 API 提供简单的编程后退按钮体验，如下所示：

window.history.go(-1);

让用户选择何时进入全屏#

没有什么比网站做出意想不到的事情更让用户恼火的了。当用户导航到您的网站时，不要试图欺骗他们进入全屏。

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

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

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

不要向用户发送垃圾邮件以将您的应用程序安装到主屏幕#

如果您计划通过安装的应用程序机制提供全屏体验，请体谅用户。

  • 谨慎点。使用横幅或页脚让他们知道他们可以安装该应用程序。
  • 如果他们拒绝提示，请不要再次显示。
  • 在用户首次访问时，除非他们对您的服务感到满意，否则他们不太可能想要安装该应用程序。考虑在您的网站上进行积极互动后提示他们安装。
  • 如果用户定期访问您的网站并且他们没有安装该应用程序，则他们将来不太可能安装您的应用程序。不要继续向他们发送垃圾邮件。

结论#

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

相关博文

打造全屏体验
赏