製作全螢幕體驗

我們能夠輕鬆打造引人入勝的全螢幕網站和應用程式，但有兩種方法可以這麼做。現在，當更多瀏覽器支援啟動全螢幕的「已安裝網頁應用程式」體驗，這一點尤其重要。

以全螢幕模式顯示應用程式或網站

使用者或開發人員可以透過多種方式，以全螢幕顯示網頁應用程式。

  • 要求瀏覽器在回應使用者手勢時顯示全螢幕。
  • 將應用程式安裝到主畫面。
  • 偽造：自動隱藏網址列。

要求瀏覽器在回應使用者手勢時顯示全螢幕

並非所有平台均相同。 iOS Safari 沒有全螢幕 API，但可以在 Android、Firefox 和 IE 11 以上版本的 Chrome 上使用。您建構的應用程式大多會結合使用 JS API 和全螢幕規格提供的 CSS 選取器。建構全螢幕體驗時，您需要關注的主要 JS API 如下：

  • element.requestFullscreen() (目前前置字元為 Chrome、Firefox 和 IE) 會以全螢幕模式顯示元素。
  • document.exitFullscreen() (目前前置字串為 Chrome、Firefox 和 IE)。 Firefox 改為使用 cancelFullScreen()) 會取消全螢幕模式。
  • 如果任何元素處於全螢幕模式，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);
  }
}

網站開發人員不討厭複雜，Sindre Sorhus' 的 Screenfull.js 模組會將兩個稍微不同的 JS API 和供應商前置字串統整到同一個一致的 API 中，這是不錯的高階抽象 API。

全螢幕 API 秘訣

將文件設為全螢幕
內文元素的全螢幕
圖 1：內文元素的全螢幕。

一般您會認為以全螢幕顯示內文元素，但如果您使用的是 WebKit 或 Blink 的轉譯引擎，就會發現將主體寬度縮減至最小的大小 (包含所有內容) 會產生奇怪的影響。(Mozilla Gecko 一切正常)。

在文件元素中使用全螢幕模式
圖 2：以全螢幕開啟文件元素。

如要修正這個問題，請使用文件元素，而非 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> 元素未定義控制項屬性，使用者就無法在全螢幕狀態下控制影片。我們建議的做法，是具備納入影片的基本容器，以及您希望使用者看到的控制項。

<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 推出以來，使用者就能夠將網頁應用程式安裝到主畫面，並啟動以全螢幕顯示的網頁應用程式。

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

如果將內容設為「是」，網頁應用程式就會以全螢幕模式執行，否則不會。預設行為是使用 Safari 顯示網頁內容。您可以使用 window.navigator.standalone 唯讀布林值 JavaScript 屬性，判斷網頁是否以全螢幕模式顯示。

Apple

Android 版 Google Chrome

Chrome 團隊最近導入了一項功能，可在使用者將網頁新增至主畫面時，指示瀏覽器啟動全螢幕頁面。與 iOS Safari 型號類似。

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

您可以將網頁應用程式捷徑圖示新增至裝置主畫面，並透過 Android 版 Chrome 的「新增至主畫面」選單項目，以全螢幕的「應用程式模式」啟動應用程式。

Google Chrome

更理想的做法是使用網頁應用程式資訊清單。

Web App Manifest (Chrome、Opera、Firefox、Samsung)

網頁應用程式資訊清單是一種簡單的 JSON 檔案，讓開發人員能夠控制應用程式在使用者預期看到的區域 (例如行動裝置主畫面)、引導使用者啟動的內容，更重要的是如何啟動應用程式。日後資訊清單可讓您進一步控管應用程式，但目前我們只著重在如何啟動您的應用程式。詳細說明：

  1. 將資訊清單告知瀏覽器
  2. 說明啟動方式

在建立資訊清單並交由網站代管後，您只需要加入涵蓋應用程式的所有頁面連結標記，如下所示：

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

自 Chrome 38 版 (2014 年 10 月) 起，Chrome 已支援資訊清單 (2014 年 10 月)，並且可讓您控制網頁應用程式安裝到主畫面時的顯示方式 (透過 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"
}

這項功能完全循序漸進，只要瀏覽器支援這項功能，您就能為使用者打造更優質且整合的使用體驗。

當使用者將網站或應用程式新增至主畫面時，系統會意圖將其視為應用程式。這表示您應該引導使用者前往應用程式的功能，而非產品到達網頁。舉例來說，如果使用者必須登入應用程式，那麼這是值得啟動的網頁。

公用應用程式

大部分的公用程式應用程式都能立即使用這項工具。建議您為這些應用程式推出獨立版本，就像在行動平台上的其他應用程式一樣。如要指示應用程式獨立啟動，請新增以下網頁應用程式資訊清單：

    "display": "standalone"
遊戲

資訊清單可讓大多數遊戲立即受益。但大多數的遊戲都想啟動全螢幕並強制執行特定方向。

開發垂直捲動器或 Flappy Birds 等遊戲時，您最有可能希望遊戲始終處於直向模式。

    "display": "fullscreen",
    "orientation": "portrait"

另一方面，如要打造益智遊戲或 X-Com 這類遊戲，則可能會希望遊戲始終使用橫向螢幕方向。

    "display": "fullscreen",
    "orientation": "landscape"
新聞網站

在大多數情況下，新聞網站都是單純以內容為基礎。大多數開發人員其實不會認為在新聞網站中加入資訊清單。資訊清單可讓您定義要啟動的內容 (新聞網站的首頁)，以及啟動方式 (全螢幕或一般瀏覽器分頁)。

選擇方式完全由您決定，以及使用者對於使用體驗的體驗。如要讓網站擁有您希望網站使用的所有瀏覽器 Chrome，可以將顯示畫面設為 browser。

    "display": "browser"

如要讓新聞網站看起來就像以新聞為主的應用程式，而且會將所有類似網頁的 Chrome 從 UI 中移除，只要將螢幕設為 standalone，即可移除類似網頁的所有 Chrome。

    "display": "standalone"

偽造：自動隱藏網址列

您可以自動隱藏網址列，步驟如下：

window.scrollTo(0, 1);

這是相當簡單的方法，系統在載入網頁時，就會告知瀏覽器列在其中。很抱歉，它並未標準化，且未受到支援。您還得處理很多枯燥的工作。

舉例來說，瀏覽器通常會在使用者返回網頁時還原網頁的位置。使用 window.scrollTo 會覆寫這個問題，這會讓使用者感到困擾。如要解決這個問題，您必須在本機儲存空間中儲存最後的位置，然後處理極端情況 (例如使用者在多個視窗中開啟網頁時)。

使用者體驗指南

建立可以利用全螢幕功能建構的網站時，需要留意幾項潛在的使用者體驗變化，才能打造使用者喜愛的服務。

不要依賴瀏覽控制項

iOS 沒有硬體返回按鈕或重新整理手勢。因此，您必須確保使用者能夠瀏覽整個應用程式，不會遭到鎖定。

您可以偵測應用程式是否以全螢幕模式或所有主要平台輕鬆使用已安裝模式。

iOS

在 iOS 上，您可以使用 navigator.standalone 布林值查看使用者是否已從主畫面啟動。

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

Web App Manifest (Chrome、Opera、Samsung)

以已安裝的應用程式模式啟動時，Chrome 不會以完整的全螢幕體驗執行，因此 document.fullscreenElement 會傳回空值，且 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. 使用可安裝的網頁應用程式機制以全螢幕呈現。
  2. 使用 # 片段管理使用者介面和應用程式狀態。

透過使用 #syntax 更新網址 (window.location = "#somestate")，並監聽 window.onhashchange 事件，您可以使用瀏覽器本身的記錄堆疊來管理應用程式狀態的變更、允許使用者使用硬體返回按鈕，或藉由使用 History API 提供簡易的程式輔助返回按鈕體驗，如下所示：

window.history.go(-1);

讓使用者選擇全螢幕的時機

比起網站有未預期的活動，對使用者而言最惱人的是。使用者前往您的網站時，不要試圖誘騙他們進入全螢幕。

請勿攔截第一個觸控事件，並呼叫 requestFullscreen()。

  1. 真是令人困擾。
  2. 日後，瀏覽器可能會決定使用者日後能允許應用程式放大全螢幕畫面。

如要以全螢幕啟動應用程式，請考慮使用各平台的安裝體驗。

不要讓使用者將應用程式安裝至主畫面

如果您打算透過安裝版應用程式機制提供全螢幕體驗，請將使用者納入考量。

  • 別緊張，使用橫幅或頁尾，告知使用者可以安裝應用程式。
  • 如果使用者關閉提示，就不會再顯示。
  • 除非使用者對您的服務感到滿意，否則首次造訪時，他們就不太可能會想安裝應用程式。建議您在網站與網站提供良好的互動後 提醒他們安裝
  • 如果使用者定期造訪您的網站，但並未安裝應用程式，他們日後不太可能安裝應用程式。切勿持續濫發垃圾內容，

結語

雖然我們尚未提供完全標準化且實作的 API，但只要善用本文介紹的部分指南，就能夠輕鬆建構能讓使用者完整使用整個螢幕的體驗，不受用戶端的影響。

意見回饋