콘텐츠로 대화 전달 - Fullscreen API

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

Fullscreen API를 사용하면 웹 앱이 페이지의 모든 콘텐츠에 자바스크립트에서 브라우저의 전체 화면 보기 모드로 전환하도록 프로그래밍 방식으로 지시할 수 있습니다. 즉, 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년 2월 11일에 업데이트됨: IE용 접두사를 포함하려면 표준 CSS 구문을 추가하고 브라우저 호환성 설명을 업데이트합니다. @dstorey님과 @patrickkettner님께 감사드립니다.