Sebagian besar browser telah memiliki kemampuan untuk masuk ke mode layar penuh atau kiosk sejak beberapa waktu lalu. Pada dasarnya, UI chrome browser tidak akan terlihat, dan konten akan mengambil alih. Untuk aplikasi yang diinstal dari Chrome Web Store, pengguna bahkan dapat mengonfigurasi secara manual aplikasi agar berjalan dalam layar penuh saat dibuka dari Halaman Tab Baru. Layar penuh manual bagus. Layar penuh terprogram lebih baik.
Fullscreen API memungkinkan aplikasi web secara terprogram memberi tahu konten apa pun di halaman untuk memasuki mode tampilan layar penuh browser, dari JavaScript. Artinya, game WebGL dan <canvas> akhirnya dapat menjadi sepenuhnya imersif, video dapat terasa seperti layar lebar, dan majalah online dapat terasa seperti majalah sungguhan. Saya menyukai browser ini, tetapi kita tidak boleh dibatasi olehnya :)
Jika Anda ingin melewati detailnya, berikut demo-nya:
Jadi, bagaimana cara kerja API? Jika Anda ingin <div>, misalnya, beralih ke layar penuh, cukup beri tahu:
div.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
div.mozRequestFullScreen();
div.msRequestFullscreen();
div.requestFullscreen(); // standard
Kemudian, untuk keluar dari layar penuh, document akan mengekspos metode untuk itu:
document.webkitExitFullscreen();
document.mozCancelFullScreen();
document.msExitFullscreen();
document.exitFullscreen();
Konten dalam mode layar penuh diposisikan di tengah area pandang browser. Developer dapat menata gaya konten tersebut dengan cara yang paling sesuai untuk dilihat. Biasanya, Anda ingin <div> mengisi seluruh ruang layar. Kabar baiknya adalah API menyertakan pseudo-pemilih CSS baru untuk ini:
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;
}
Pemilih semu CSS sangat memudahkan Anda menata gaya konten layar penuh sesuai keinginan.
Fullscreen API diaktifkan secara default di Chrome 15, FF 14, IE 11, dan Opera 12.1. Untuk informasi selengkapnya tentang API lainnya, lihat spesifikasi.
Diperbarui 11-10-2012: agar sesuai dengan perubahan spesifikasi. Mengubah "S" menjadi huruf kecil di requestFullscreen() dan mengubah document.webkitCancelFullScreen() menjadi document.webkitExitFullscreen(). Memperbarui komentar kompatibilitas browser.
Diperbarui 11-02-2014: untuk menyertakan awalan untuk IE, menambahkan sintaksis CSS standar, dan memperbarui komentar kompatibilitas browser. Terima kasih @dstorey dan @patrickkettner.