技能 Screenfull Fullscreen API
🖥️
Screenfull Fullscreen API
安全
為網頁應用程式添加全螢幕切換
為您的網頁應用程式需要跨瀏覽器全螢幕支援嗎？此技能提供完整的模式，使用 screenfull 庫與 Angular 實現全螢幕切換按鈕、沉浸式顯示模式和簡報視圖。
支持: Claude Codex Code(CC)
1
下载技能 ZIP
2
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
3
开启并开始使用
测试它
正在使用“Screenfull Fullscreen API”。 Add fullscreen toggle to my dashboard component
预期结果:
- Created FullscreenToggleComponent with signal-based state management
- Uses screenfull.toggle() to switch between normal and fullscreen mode
- Listens for screenfull 'change' events to update UI state
- Includes graceful fallback when fullscreen API is not supported
- Cleaned up event listeners in component lifecycle
安全审计
安全v3 • 1/10/2026
Documentation-only skill containing instructional markdown with code examples for using the screenfull library. No executable code, no network calls, no file system access, no environment variable reading. Purely a reference guide for implementing browser fullscreen API functionality.
1
已扫描文件
520
分析行数
0
发现项
3
审计总数
未发现安全问题
审计者: claude 查看审计历史 →
质量评分
38
架构
100
可维护性
81
内容
22
社区
100
安全
52
规范符合性
你能构建什么
建構沉浸式儀表板
建立可在簡報時展開為全螢幕的儀表板視圖，以獲得更好的資料可視性
建立媒體檢視器
建構帶有流暢轉場和控制項的全螢幕圖片庫和影片播放器
添加簡報模式
實現帶有鍵盤導航的簡報幻燈片檢視器，以獲得幻燈片播放體驗
试试这些提示
基本全螢幕切換
Add a fullscreen toggle button to my Angular component using the screenfull library
元素全螢幕
Make a specific div element go fullscreen using screenfull with Angular signals
圖片庫全螢幕
Create a fullscreen image viewer component that shows photos in immersive mode
簡報模式
Build a presentation mode component with slides and keyboard navigation for next and previous
最佳实践
- 在使用全螢幕 API 方法之前，始終檢查 screenfull.isEnabled
- 提供明確的退出全螢幕按鈕並正確處理 Escape 鍵
- 在元件銷毀時清理事件監聽器以防止記憶體洩漏
避免
- 不要假設全螢幕 API 在所有瀏覽器中都可用
- 避免在沒有使用者互動或明確點擊按鈕的情況下強制進入全螢幕
- 不要忽視行動瀏覽器對全螢幕支援的限制
常见问题
哪些瀏覽器支援 screenfull.js？
Chrome、Firefox、Safari、Edge 和 Android Chrome 都有完整支援。iOS Safari 僅對影片元素有有限支援。
需要的最少 screenfull 版本是什麼？
此技能專為 screenfull 6.0.2 或更高版本設計，如 package.json 依賴項中所指定。
如何檢查全螢幕是否可用？
使用 screenfull.isEnabled 布林屬性。在調用 toggle、request 或 exit 方法之前，始終檢查此屬性。
此技能會向外傳送任何資料嗎？
不。這是一個帶有程式碼範例的文件技能。screenfull 庫完全在瀏覽器中運行，不會傳輸任何資料。
為什麼全螢幕在行動裝置上無法運作？
行動瀏覽器的全螢幕支援有限。iOS Safari 僅允許影片元素的全螢幕。請在桌面瀏覽器上測試以獲得完整功能。
screenfull 與原生 Fullscreen API 有什麼不同？
Screenfull 通過標準化瀏覽器差異和自動處理供應商前綴來提供跨瀏覽器兼容性。