스킬 screenfull-fullscreen-api
🖥️
screenfull-fullscreen-api
안전 🌐
네트워크 접근📁
파일 시스템 액세스⚙️
외부 명령어
為網頁應用程式新增全螢幕切換功能
為您的網頁應用程式提供跨瀏覽器全螢幕支援。此技能提供完整的實作模式,包括全螢幕切換按鈕、沉浸式顯示模式和簡報檢視功能,使用 screenfull 函式庫搭配 Angular。
지원: Claude Codex Code(CC)
1
스킬 ZIP 다운로드
2
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
3
토글을 켜고 사용 시작
테스트해 보기
"screenfull-fullscreen-api" 사용 중입니다. 為我的儀表板元件新增全螢幕切換功能
예상 결과:
- 建立了具有基於 signal 狀態管理的 FullscreenToggleComponent
- 使用 screenfull.toggle() 在一般模式和全螢幕模式之間切換
- 監聽 screenfull 'change' 事件以更新 UI 狀態
- 包含不支援全螢幕 API 時的優雅降級處理
- 在元件生命週期中清理事件監聽器
"screenfull-fullscreen-api" 사용 중입니다. 為我的相簿建立全螢幕圖片檢視器
예상 결과:
- 建立了具有點擊檢視功能的 ConstructionPhotosComponent
- 實作 screenfull.request() 以提供沉浸式照片檢視
- 新增鍵盤 Escape 鍵處理以退出全螢幕模式
- 建立流暢的覆蓋層並顯示照片資訊
- 包含退出全螢幕時的適當清理
"screenfull-fullscreen-api" 사용 중입니다. 建立具有投影片導航的簡報模式
예상 결과:
- 建立了具有計算投影片狀態的 PresentationModeComponent
- 新增鍵盤快捷鍵:方向鍵用於導航,Escape 鍵退出
- 實作適當的生命週期管理,包含事件監聽器清理
- 設計深色模式以提供沉浸式簡報體驗
- 新增具有停用狀態的上一張/下一張投影片控制項
보안 감사
안전v3 • 1/16/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.
2
스캔된 파일
697
분석된 줄 수
3
발견 사항
3
총 감사 수
위험 요인
🌐 네트워크 접근 (7)
📁 파일 시스템 액세스 (1)
⚙️ 외부 명령어 (20)
SKILL.md:24-27 SKILL.md:27-33 SKILL.md:33-40 SKILL.md:50-73 SKILL.md:73-77 SKILL.md:77-84 SKILL.md:103-104 SKILL.md:126-142 SKILL.md:142-146 SKILL.md:146-155 SKILL.md:184-185 SKILL.md:267-308 SKILL.md:308-312 SKILL.md:312-319 SKILL.md:345-346 SKILL.md:361-436 SKILL.md:436-442 SKILL.md:442-467 SKILL.md:467-472 SKILL.md:472-484
감사자: claude 감사 이력 보기 →
품질 점수
38
아키텍처
100
유지보수성
85
콘텐츠
22
커뮤니티
100
보안
78
사양 준수
만들 수 있는 것
建立沉浸式儀表板
建立可擴展至全螢幕的儀表板檢視,在簡報時提供更好的資料可見性
建立媒體檢視器
建立具有流暢轉場和控制項的全螢幕圖片庫和影片播放器
新增簡報模式
實作具有鍵盤導航的簡報投影片檢視器,提供幻燈片播放體驗
이 프롬프트를 사용해 보세요
基本全螢幕切換
使用 screenfull 函式庫為我的 Angular 元件新增全螢幕切換按鈕
元素全螢幕
使用 screenfull 搭配 Angular signals 讓特定的 div 元素進入全螢幕
圖片庫全螢幕
建立一個全螢幕圖片檢視器元件,以沉浸式模式顯示照片
簡報模式
建立一個具有投影片和鍵盤導航的簡報模式元件,可切換上一張和下一張
모범 사례
- 在使用全螢幕 API 方法之前,務必檢查 screenfull.isEnabled
- 提供清楚的退出全螢幕按鈕,並正確處理 Escape 鍵
- 在元件銷毀時清理事件監聽器,以防止記憶體洩漏
피하기
- 不要假設所有瀏覽器都支援全螢幕 API
- 避免在沒有使用者互動或明確點擊按鈕的情況下強制進入全螢幕
- 不要忽略行動瀏覽器對全螢幕支援的限制
자주 묻는 질문
哪些瀏覽器支援 screenfull.js?
Chrome、Firefox、Safari、Edge 和 Android Chrome 都完全支援。iOS Safari 僅對影片元素提供有限支援。
所需的最低 screenfull 版本為何?
此技能專為 package.json 相依性中指定的 screenfull 6.0.2 或更高版本設計。
如何檢查全螢幕是否可用?
使用 screenfull.isEnabled 布林屬性。在呼叫 toggle、request 或 exit 方法之前,務必先檢查此屬性。
此技能是否會對外傳送任何資料?
不會。這是一個包含程式碼範例的文件技能。screenfull 函式庫完全在瀏覽器中執行,不會傳輸資料。
為什麼全螢幕在行動裝置上無法運作?
行動瀏覽器對全螢幕的支援有限。iOS Safari 僅允許影片元素使用全螢幕。請在桌面瀏覽器上測試以獲得完整功能。
screenfull 與原生 Fullscreen API 有何不同?
Screenfull 透過標準化瀏覽器差異並自動處理供應商前綴,提供跨瀏覽器相容性。