Większość przeglądarek umożliwia już 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ęczny tryb pełnoekranowy jest dobry. 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ą przypominać filmy wyświetlane 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 odpowiednią 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ła 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 IE, dodano standardową składnię CSS i zaktualizowano komentarz dotyczący zgodności z przeglądarką. Dziękuję @dstorey i @patrickkettner.