製作全螢幕體驗

讓使用者能夠輕鬆製作沉浸式的全螢幕網站。 但就像網路上的任何內容一樣 隨著越來越多的瀏覽器支援「 網頁應用程式」啟動全螢幕模式

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

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

  • 使用者手勢要求瀏覽器進入全螢幕模式。
  • 將應用程式安裝至主畫面。
  • 假裝：自動隱藏網址列。

使用者手勢要求瀏覽器進入全螢幕模式

每個平台的情況各有不同： 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。
，瞭解如何調查及移除這項存取權。

應用程式進入全螢幕模式後，您就無法再使用瀏覽器的 UI 控制項 可用的預先定義機器類型 不適用於您的工作負載這會改變使用者與網站互動的方式 無須專人管理他們沒有「轉寄」等標準導覽控制項 以及向後；而不是「重新整理」按鈕的跳脫模式是 這點就很重要我們提供多種 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 提示

將文件設為全螢幕模式
以全螢幕顯示內文元素
圖 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

Chrome for Android

Chrome 小組最近導入了一項功能，告訴瀏覽器 在使用者將網頁新增至主畫面時以全螢幕啟動。是 類似於 iOS Safari 型號

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

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

Google Chrome

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

網頁應用程式資訊清單 (Chrome、Opera、Firefox、Samsung)

網頁應用程式資訊清單 這個簡單的 JSON 檔案提供您 可控管應用程式在各區域向使用者顯示的方式 他們預期看到的應用程式 (例如行動主畫面) 直接 並更重要的是引導使用者啟動應用程式在 這個資訊清單現在可讓您進一步控管應用程式 只會聚焦於應用程式的推出方式詳細說明：

  1. 向瀏覽器提供資訊清單
  2. 說明如何啟動

建立資訊清單並託管於網站後，您只需要 請務必在包含應用程式的所有網頁中加入連結標記，如下所示：

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

Chrome 自 38 版起支援 Android 的資訊清單 (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"

如果您希望自家新聞網站看起來像是大部分的新聞主題應用程式 並從使用者介面中移除所有網路式瀏覽器 方法是將顯示設為 standalone。

    "display": "standalone"

虛假網址：自動隱藏網址列

你可以「假造全螢幕」方法是以下列方式自動隱藏網址列：

window.scrollTo(0, 1);
敬上

這個方法相當簡單：系統會在載入網頁時觸發瀏覽器列 錯誤提示但很抱歉，這項做法並未經過標準化，且成效不佳 支援。您也需要解決各種奇怪的問題。

舉例來說，瀏覽器通常會在使用者造訪時還原網頁上的位置 就會返回該區塊使用 window.scrollTo 會覆寫此值，這會造成乾擾 使用者。為解決這個問題，您必須先儲存 並處理邊緣情況 (例如，如果使用者有 網頁)。

使用者體驗指南

建立能充分利用全螢幕的網站時， 您必須留意的潛在使用者體驗變更數量 打造使用者喜愛的服務

不要仰賴導覽控制項

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

可偵測目前是以全螢幕模式還是安裝模式執行 在所有熱門平台上輕鬆發布

iOS

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

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

網頁應用程式資訊清單 (Chrome、Opera、Samsung)

以已安裝應用程式的形式啟動 Chrome 時，無法在真正的全螢幕狀態下執行 Chrome 因此 document.fullscreenElement 會傳回空值和 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 媒體 查詢設為網頁應用程式資訊清單中定義的值。如果選擇 選項：

@media (display-mode: fullscreen) {
}

如果使用者在獨立模式下啟動應用程式，display-mode 媒體查詢會是 standalone：

@media (display-mode: standalone) {
}

Firefox

使用者透過您的網站要求全螢幕，或使用者在 全螢幕模式都支援所有標準全螢幕 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
}

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. 使用 # 片段管理 UI 和應用程式狀態。

使用 #syntax 更新網址 (window.location = "#somestate")，以及 監聽 window.onhashchange 事件，您可以使用瀏覽器本身的 透過記錄堆疊來管理應用程式狀態的變更，讓使用者能夠 的硬體返回按鈕，或提供簡易程式輔助返回按鈕 透過記錄 API 將體驗最佳化，方法如下：

window.history.go(-1);

讓使用者選擇何時進入全螢幕模式

比起網站進行特定操作，使用者完全沒有困擾 不如預期外使用者瀏覽您的網站時，不會試圖誘騙他們 全螢幕播放。

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

  1. 令人困擾。
  2. 瀏覽器之後可能決定在 允許應用程式顯示全螢幕

如要以全螢幕模式啟動應用程式，請考慮使用 打造獨特的使用者體驗

請勿讓使用者以垃圾郵件的形式將應用程式安裝到主畫面

如果您打算透過安裝版應用程式機制提供全螢幕體驗 可以考慮得到的問題

  • 保持謹慎，使用橫幅或頁尾，提醒使用者安裝 應用程式。
  • 如果使用者關閉提示，不要再顯示這個提示。
  • 使用者第一次造訪時，可能不想安裝應用程式 對服務感到滿意考慮在下列時間過後才提示使用者安裝 給予使用者良好互動的機會
  • 如果使用者經常造訪您的網站，但未安裝應用程式， 日後不太可能會安裝您的應用程式。而不要一直散佈垃圾內容。

結論

我們沒有完全標準化且實作的 API，但使用 只要善用本文中提到的指南，您就能輕鬆打造 充分利用使用者的整個螢幕，無論用戶端為何。

意見回饋