Fullscreen API 可以將網頁切換成全螢幕，這個 API 提供了一組方法和屬性，使得網頁可以在使用者的裝置上以全螢幕顯示，提供更沉浸式的體驗。通常用於影片播放、遊戲，圖片瀏覽器等需要最大化顯示空間的應用場景中。

請求和退出全螢幕模式

使用 Fullscreen API 進入全螢幕模式非常簡單，只需使用 Element.requestFullscreen() 方法即可。這個方法可以應用於任何 DOM 元素，無論是 div、video 還是 canvas。

以下是進入全螢幕模式的基本範例：

document.getElementById('myElement').requestFullscreen().catch(err => {
  console.error(`錯誤: ${err.message} (${err.name})`);
});

退出全螢幕模式使用 document.exitFullscreen() 方法：

document.exitFullscreen().catch(err => {
  console.error(`錯誤: ${err.message} (${err.name})`);
});

需要注意的是，這些方法需要透過與使用者互動才能使用(例如點選按鈕)，這是瀏覽器為了防止惡意網站自動進入全螢幕模式而設置的安全措施。

處理全螢幕狀態變化

當使用者進入或退出全螢幕模式時，Fullscreen API 提供了相關的事件和屬性來監聽變化。

監聽 fullscreenchange 事件來捕捉全螢幕狀態的變化：

document.addEventListener('fullscreenchange', () => {
  if (document.fullscreenElement) {
    console.log('已進入全螢幕模式');
  } else {
    console.log('已離開全螢幕模式');
  }
});

此外，還可以使用 document.fullscreenElement 屬性來檢查當前是否有元素處於全螢幕模式中。

<button id="checkFullscreen">檢查全螢幕狀態</button>

checkFullscreenButton.addEventListener('click', () => {
  if (document.fullscreenElement) {
    alert('有元素處於全螢幕模式中。');
  } else {
    alert('沒有元素處於全螢幕模式中。');
  }
});

在全螢幕模式調整樣式

進入全螢幕模式後，頁面佈局和樣式可能需要做出調整，以適應新的顯示模式。例如，可能需要隱藏某些不必要的 UI 元素，或調整元素的大小和位置。

可以使用 CSS 來針對全螢幕模式進行樣式調整：

:fullscreen {
  background-color: black;
  color: white;
}

:fullscreen video {
  width: 100%;
  height: 100%;
}

應用場景和實作細節

Fullscreen API 在許多應用場景中都有廣泛的應用。例如，在網站播放影片時，使用者可以點選按鈕將影片切換到全螢幕模式，獲得更好的觀看體驗。在網頁遊戲中，也能進入全螢幕模式提升遊玩體驗。

使用 Fullscreen API 還有一些實作細節可以注意：

1. 使用者體驗：確保進入和退出全螢幕模式的操作簡單直觀，並且提供明顯的提示和按鈕。
2. 錯誤處理：捕捉並處理可能的錯誤，確保應用在任何情況下都能正常運行。
3. 事件監聽：監聽全螢幕狀態變化事件，以便及時更新 UI 和樣式。
4. 安全性：遵循瀏覽器的安全規範，避免在沒有與使用者互動的情況下自動進入全螢幕模式。

小結

以上有任何問題，歡迎留言討論。