瀏覽器的全屏功能小結

CntChen_發表於2018-11-14
瀏覽器

原文地址: 瀏覽器的全屏功能小結

背景

瀏覽器頁面在視訊播放, 圖片瀏覽, 編輯文字等場景, 會遇到增大頁面的可檢視和可互動區域的需求.

對於這種場景, 一般做法是提供一個全屏按鈕, 使用者可以選擇點選按鈕觸發全屏.

全屏場景-文字
全屏場景-視訊

本文對實現瀏覽器全屏進行簡單總結:

  • 偽全屏, 瀏覽器全屏和元素全屏
  • 全屏相關快捷鍵
  • 元素全屏的相容性和瀏覽器差異

偽全屏, 瀏覽器全屏和元素全屏

在瞭解全屏功能之前, 先了解三個全屏相關概念: 偽全屏, 瀏覽器全屏 和 元素全屏.

偽全屏

保持頁面大小, 將頁面中的次要的內容隱藏起來, 把頁面空間讓給需要突出給使用者的內容. 偽全屏並沒有改變頁面在顯示器中的展示面積, 只是優化了頁面呈現的內容, 所以稱為 偽全屏.

偽全屏示例

偽全屏是完全由程式碼控制實現, 不會有相容性問題.

瀏覽器全屏

瀏覽器全屏的展示

瀏覽器全屏時瀏覽器鋪滿顯示器視窗, 保留標籤欄, 位址列等瀏覽器元件.

如chrome瀏覽器全屏:

chrome瀏覽器全屏

瀏覽器全屏是系統視窗全屏

瀏覽器全屏通過瀏覽器選單或瀏覽器快捷鍵觸發. 瀏覽器全屏是作業系統的視窗全屏在瀏覽器上的實現, 其他桌面軟體一般也支援視窗全屏.

  • IE11瀏覽器非全屏

    瀏覽器非全屏

  • IE11瀏覽器視窗全屏

    瀏覽器全屏

  • 資源管理器非全屏

    資源管理器非全屏

  • 資源管理器視窗全屏

    資源管理器全屏

瀏覽器全屏快捷鍵

  • mac: control + command + F 切換瀏覽器全屏
  • win: F11 切換瀏覽器全屏

元素全屏

元素全屏的展示

元素全屏的元素會鋪滿顯示器全屏, 並將瀏覽器本身的視窗欄, 標籤欄和位址列都收起來.

  • 騰訊視訊網頁元素全屏

    騰訊視訊全屏

  • 騰訊視訊非全屏

    騰訊視訊非全屏

元素全屏由程式碼控制

元素全屏是瀏覽器實現的頁面全屏能力, 由 js 程式碼控制頁面中的某個元素進行全屏展示. 相關文件可以看 Guide to the Fullscreen API.

比如: 騰訊視訊播放時的全屏, 是對 <video /> 的祖先元素進行了全屏操作.

  • 騰訊視訊video元素位置

    騰訊視訊video元素

  • 全屏播放時的全屏元素為 video 的祖先元素

    騰訊視訊video祖先元素全屏

元素全屏能力測試

元素全屏能力的瀏覽器相容性可以檢視官方文件: Fullscreen API.

瀏覽器元素全屏能力測試: 可以使用元素全屏庫 fscreen 的測試頁面: fscreen.rafrex.com/.

fscreen測試頁面

元素全屏快捷鍵

  • mac/win Esc 退出元素全屏
  • 沒有自帶的觸發元素全屏快捷鍵

各瀏覽器的全屏差異

測試了 mac 和 windows 系統下的 5 款瀏覽器.

  • chrome
  • firefox
  • Edge (windows)
  • IE11 (windows)
  • safari (mac)

Esc 快捷鍵

  • 瀏覽器全屏下, 按 Esc 不會退出全屏, 會觸發 Esc 鍵盤事件. safari 會退出瀏覽器全屏並觸發事件, 需要針對 safari 做 preventDefault.
  • 元素全屏下, 按 Esc 按鍵會退出元素全屏, 不會觸發 Esc 的鍵盤事件.

觸發元素全屏, 部分瀏覽器會出現提示

這些提示是瀏覽器行為, 無法通過 js 程式碼禁止.

  • chrome 會提示 "press Esc to exit full screen"

    chrome元素全屏提示

  • firefox 會提示 "rafrex.com is now full screen"

    firefox元素全屏提示

  • IE11會提示"Do you want to view rafrex.com in full screen?...", 可以選擇"Allow once", "Always allow", "Deny once"

    IE11元素全屏提示

  • Edge 會提示"fscreen.rafrex.com switched to full screen(Esc to exit)."

    edge元素全屏提示

特定瀏覽器問題

firefox

觸發元素全屏和退出元素全屏後, firefox 會出現1秒左右的顯示器黑屏. fscreen 的測試程式碼, youtube 的視訊全屏播放都存在這個問題.

firefox元素全屏1秒黑屏

該問題 mac 和 win 都存在. 相關討論: Black screen for a second when going fullscreen on videos.

safari

mac safari 開啟除錯工具情況下, 觸發瀏覽器全屏時, 除錯工具會黑掉.

IE11

IE11 的元素全屏只能由使用者操作觸發, 不能由鍵盤事件觸發. 相關討論: IE11 fullscreen triggered from keyboard. 鍵盤事件觸發元素全屏時, 會觸發onfullscreenerror(MSFullscreenError) 事件.

QQ瀏覽器

QQ瀏覽器劫持全屏快捷鍵F11後, 第三次點選F11沒有進入鍵盤事件回撥, 直接觸發瀏覽器全屏. 如果第三次點選F11前, 滑鼠點選了頁面元素, 則問題不會發生.

懷疑是瀏覽器的坑. 最簡測試程式碼:

let isFullscreen = false;
window.addEventListener('keydown',
function(e) {
    console.log('test:', 'keydown', e.key, e.keyCode);
    if (e.keyCode === 122) {
        console.log('test:', 'F11 clicked');
        e.preventDefault();
        if (isFullscreen) {
            console.log('test:', 'exit fullscreen');
            document.webkitExitFullscreen();
        } else {
            console.log('test:', 'enter fullscreen');
            document.body.webkitRequestFullscreen();
        }
        isFullscreen = !isFullscreen;
    }
})
// win7, QQ瀏覽器10.2(1893), 核心模式: 使用智慧核心模式
複製程式碼

IE10

IE10 不支援元素全屏, 可以模擬傳送鍵盤事件觸發瀏覽器全屏. 沒實試, 相關討論: Internet Explorer full screen mode.

總結

  • 瀏覽器全屏只能由使用者觸發.
  • 元素全屏由程式碼觸發使元素鋪滿顯示器頁面, 要考慮相容性和瀏覽器行為差異.
  • 偽全屏不改變頁面大小, 優化內容展示, 沒有相容性問題.

References

EOF

相關文章