瀏覽器 F11 全螢幕偵測：導覽列顯示邏輯的正確實作

需求：頁面頂部導覽列預設隱藏，滑鼠移至頂端或瀏覽器進入全螢幕（F11）時顯示。開發者嘗試用 keydown 捕捉 F11 (keyCode 122) 並比對 screen.height 與 window.innerHeight，但遇到「導覽列閃一下又消失」、「F11 事件未觸發」問題。本文分析原因並給出穩健方案。

原方案缺陷分析

• keyCode === 122 只能攔截鍵盤事件，**無法偵測使用者點選選單「全螢幕」或雙擊標題列進入全螢幕**。
• 全螢幕狀態切換屬瀏覽器 UI 行為，**不保證觸發 JS 事件**，且各瀏覽器實作不同。
• setTimeout 延遲判斷屬權宜之計，無法根治時序競爭。

現代標準解法：Fullscreen API

瀏覽器提供 document.fullscreenElement、fullscreenchange 事件，可準確偵測全螢幕狀態變化。

完整實作範例

const nav = document.getElementById('topNav');

// 1. 滑鼠移入頂端顯示
document.addEventListener('mousemove', e => {
    if (e.clientY < 30) nav.classList.add('show');
    else if (e.clientY > 80) nav.classList.remove('show');
});

// 2. 全螢幕變化偵測
document.addEventListener('fullscreenchange', () => {
    if (document.fullscreenElement) {
        nav.classList.add('show'); // 進入全螢幕 → 顯示導覽
    } else {
        // 離開全螢幕：依滑鼠位置決定是否保持顯示
        // 這裡簡單處理：隱藏，實際可結合 mousemove 邏輯
        nav.classList.remove('show');
    }
});

// 3. 提供按鈕讓使用者主動切換全螢幕（可選）
document.getElementById('btnFullscreen').addEventListener('click', async () => {
    try {
        await document.documentElement.requestFullscreen();
    } catch (err) {
        console.warn('全螢幕請求失敗：', err);
    }
});

CSS 配合

#topNav {
    position: fixed; top: 0; left: 0; right: 0; height: 48px;
    background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.1);
    transform: translateY(-100%); transition: transform .3s;
    z-index: 9999;
}
#topNav.show { transform: translateY(0); }

兼容性補充

• IE11 需用 msRequestFullscreen、MSFullscreenChange 事件、document.msFullscreenElement。
• 舊版 WebKit 需 webkitRequestFullscreen、webkitfullscreenchange。
• 建議使用 screenfull.js 等輕量庫統一跨瀏覽器 API。

結語

不要嘗試攔截 F11 鍵盤事件來偵測全螢幕。請使用標準的 Fullscreen API，配合滑鼠位置邏輯，即可穩健實現「全螢幕時顯示導覽列」的需求。