瀏覽器的全屏功能小結

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

背景

瀏覽器頁面在視頻播放, 圖片瀏覽, 編輯文本等場景, 會遇到增大頁面的可查看和可交互區域的需求.

對於這種場景, 通常作法是提供一個全屏按鈕, 用戶能夠選擇點擊按鈕觸發全屏.

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

• 僞全屏, 瀏覽器全屏和元素全屏
• 全屏相關快捷鍵
• 元素全屏的兼容性和瀏覽器差別

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

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

僞全屏

保持頁面大小, 將頁面中的次要的內容隱藏起來, 把頁面空間讓給須要突出給用戶的內容. 僞全屏並無改變頁面在顯示器中的展現面積, 只是優化了頁面呈現的內容, 因此稱爲 僞全屏.

僞全屏是徹底由代碼控制實現, 不會有兼容性問題.

瀏覽器全屏

瀏覽器全屏的展現

瀏覽器全屏時瀏覽器鋪滿顯示器窗口, 保留標籤欄, 地址欄等瀏覽器組件.

如chrome瀏覽器全屏:

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

瀏覽器全屏經過瀏覽器菜單或瀏覽器快捷鍵觸發. 瀏覽器全屏是操做系統的窗口全屏在瀏覽器上的實現, 其餘桌面軟件通常也支持窗口全屏.

• IE11瀏覽器非全屏

  

• IE11瀏覽器窗口全屏

  

• 資源管理器非全屏

  

• 資源管理器窗口全屏

  

瀏覽器全屏快捷鍵

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

元素全屏

元素全屏的展現

元素全屏的元素會鋪滿顯示器全屏, 並將瀏覽器自己的窗口欄, 標籤欄和地址欄都收起來.

• 騰訊視頻網頁元素全屏

  

• 騰訊視頻非全屏

  

元素全屏由代碼控制

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

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

• 騰訊視頻video元素位置

  

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

  

元素全屏能力測試

元素全屏能力的瀏覽器兼容性能夠查看官方文檔: Fullscreen API.

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

元素全屏快捷鍵

• 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"

  

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

  

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

  

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

  

特定瀏覽器問題

firefox

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

該問題 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

• Fullscreen API

• fscreen

• Web全屏模式

EOF