Większość przeglądarek umożliwia już od jakiegoś czasu korzystanie z trybu pełnoekranowego lub kioskowego. Oznacza to, że interfejs użytkownika przeglądarki znika, a na pierwszy plan wysuwają się treści. W przypadku aplikacji zainstalowanych ze sklepu Chrome Web Store użytkownicy mogli nawet ręcznie skonfigurować aplikację, aby uruchamiała się na pełnym ekranie po otwarciu ze strony nowej karty. Ręczne przełączenie na pełny ekran jest dobre. Automatyczne wyświetlanie na pełnym ekranie jest lepsze
Interfejs Fullscreen API umożliwia aplikacjom internetowym sterowanie za pomocą kodu JavaScript wyświetlaniem dowolnej zawartości na stronie w trybie pełnoekranowym przeglądarki. Oznacza to, że gry WebGL i <canvas> mogą w końcu stać się w pełni wciągające, filmy mogą wyglądać jak na dużym ekranie, a magazyny online mogą stać się bardziej realistyczne. Uwielbiam tę przeglądarkę, ale nie powinna nas ograniczać. :)
Jeśli chcesz pominąć szczegóły, obejrzyj prezentację:
Jak działa interfejs API? Jeśli chcesz, aby <div> wyświetlał się na pełnym ekranie, po prostu powiedz mu:
div.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
div.mozRequestFullScreen();
div.msRequestFullscreen();
div.requestFullscreen(); // standard
Aby wyjść z trybu pełnoekranowego, document udostępnia tę metodę:
document.webkitExitFullscreen();
document.mozCancelFullScreen();
document.msExitFullscreen();
document.exitFullscreen();
Treści w trybie pełnoekranowym są wyśrodkowane w widocznym obszarze przeglądarki. To deweloper decyduje o stylu treści, który jest najbardziej odpowiedni do wyświetlania. Zazwyczaj chcesz, aby <div> zajmowało cały ekran. Dobra wiadomość jest taka, że interfejs API zawiera nowe pseudoselektory CSS do tego celu:
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;
}
Dzięki pseudoselektorom CSS możesz bardzo łatwo nadać styl treści pełnoekranowych w dowolny sposób.
Interfejs Fullscreen API jest włączony domyślnie w Chrome 15, FF 14, IE 11 i Opera 12.1. Więcej informacji o pozostałych interfejsach API znajdziesz w specyfikacji.
Zaktualizowano 11 października 2012 r.: aby dostosować się do zmian w specyfikacji. Zmieniono literę „S” w słowie „requestFullscreen()” na małą literę i zmieniono „document.webkitCancelFullScreen()” na „document.webkitExitFullscreen()”. Zaktualizowano komentarz dotyczący zgodności z przeglądarką.
Zaktualizowano 11.02.2014: dodano prefiksy dla Internet Explorera, dodano standardową składnię CSS i zaktualizowano komentarz dotyczący zgodności z przeglądarką. Dziękuję @dstorey i @patrickkettner.