콘텐츠로 대화 전달 - Fullscreen API

대부분의 브라우저는 한동안 전체 화면 또는 키오스크 모드를 사용할 수 있습니다. 기본적으로 브라우저의 Chrome UI가 사라지고 콘텐츠가 표시됩니다. Chrome 웹 스토어에서 설치된 앱의 경우 사용자가 새 탭 페이지에서 열 때 전체 화면으로 실행되도록 앱을 수동으로 구성할 수도 있었습니다. 수동 전체 화면이 좋습니다. 프로그래매틱 전체 화면이 더 좋습니다.

Fullscreen API를 사용하면 웹 앱이 JavaScript에서 페이지의 모든 콘텐츠에 브라우저의 전체 화면 보기 모드를 시작하도록 프로그래매틱 방식으로 지시할 수 있습니다. 즉, WebGL 및 <canvas> 게임이 완전히 몰입형이 될 수 있고, 동영상이 마치 영화관의 대형 스크린처럼 느껴질 수 있으며, 온라인 잡지가 실제 잡지처럼 느껴질 수 있습니다. 브라우저를 좋아하지만 브라우저에 제약되지 않아야 합니다. :)

세부정보를 건너뛰려면 다음 데모를 참고하세요.

전체 화면 데모 스크린샷

API는 어떻게 작동하나요? 예를 들어 <div>를 전체 화면으로 전환하려면 다음과 같이 말하세요.

div.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
div.mozRequestFullScreen();
div.msRequestFullscreen();
div.requestFullscreen(); // standard

그런 다음 전체 화면을 종료하기 위해 document는 다음과 같은 메서드를 노출합니다.

document.webkitExitFullscreen();
document.mozCancelFullScreen();
document.msExitFullscreen();
document.exitFullscreen();

전체 화면 모드의 콘텐츠는 브라우저 표시 영역의 중앙에 배치됩니다. 콘텐츠를 보기에 가장 적절한 방식으로 스타일을 지정하는 것은 개발자에게 달려 있습니다. 일반적으로 <div>가 전체 화면을 차지하도록 설정합니다. 다행히 API에는 이를 위한 새로운 CSS 가상 선택자가 포함되어 있습니다.

div:-webkit-full-screen {
    width: 100% !important;
}
div:-moz-full-screen {
    width: 100% !important;
}
div:-ms-fullscreen {
    width: 100% !important;
}
div:fullscreen {
    width: 100% !important;
}

/* While in fullscreen, hide any children with class 'tohide' */
:-webkit-full-screen .tohide {
    display: none;
}
:-moz-full-screen .tohide {
    display: none;
}
:-ms-fullscreen .tohide {
    display: none;
}
:fullscreen .tohide {
    display: none;
}

CSS 가상 선택기를 사용하면 원하는 방식으로 전체 화면 콘텐츠의 스타일을 매우 쉽게 지정할 수 있습니다.

Fullscreen API는 Chrome 15, FF 14, IE 11, Opera 12.1에서 기본적으로 사용 설정되어 있습니다. 나머지 API에 관한 자세한 내용은 사양을 참고하세요.

2012-10-11 업데이트: 사양 변경사항에 맞게 업데이트했습니다. requestFullscreen()의 'S'를 소문자로 변경하고 document.webkitCancelFullScreen()를 document.webkitExitFullscreen()로 변경했습니다. 브라우저 호환성 주석을 업데이트했습니다.

2014-02-11 업데이트: IE의 접두사를 포함하고, 표준 CSS 문법을 추가하고, 브라우저 호환성 주석을 업데이트했습니다. @dstorey님, @patrickkettner님, 감사합니다.