Sebagian besar browser memiliki kemampuan untuk memasuki mode layar penuh atau kios untuk sementara waktu. Pada dasarnya, UI Chrome browser tidak mengganggu, dan konten akan mengambil alih. Untuk aplikasi yang diinstal dari Chrome Web Store, pengguna bahkan dapat mengonfigurasi secara manual aplikasi untuk berjalan dalam layar penuh saat dibuka dari Halaman Tab Baru. Layar penuh manual itu bagus. Layar penuh terprogram lebih baik.
Fullscreen API memungkinkan aplikasi web untuk secara terprogram memberi tahu konten apa pun di halaman untuk masuk ke mode tampilan layar penuh browser, dari JavaScript. Artinya, game WebGL dan <canvas> pada akhirnya dapat menjadi sepenuhnya imersif, video dapat terasa seperti layar perak, dan majalah online dapat terasa seperti nyata. Saya suka browsernya, tetapi seharusnya kita tidak dibatasi olehnya :)
Jika Anda ingin melewati detailnya, berikut demonya:
Jadi, bagaimana cara kerja API? Jika Anda ingin <div>, misalnya, beralih ke layar penuh, cukup perintahkan untuk:
div.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
div.mozRequestFullScreen();
div.msRequestFullscreen();
div.requestFullscreen(); // standard
Kemudian untuk keluar dari layar penuh, document menampilkan metode untuk hal tersebut:
document.webkitExitFullscreen();
document.mozCancelFullScreen();
document.msExitFullscreen();
document.exitFullscreen();
Konten dalam mode layar penuh berada di tengah area pandang browser. Developer dapat mendesain konten tersebut dengan cara yang paling sesuai untuk dilihat. Biasanya, Anda ingin <div> mengisi seluruh area layar. Kabar baiknya adalah bahwa API menyertakan pemilih pseudo 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 memudahkan penataan gaya konten layar penuh sesuai keinginan Anda.
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 selaras dengan perubahan spesifikasi. Membuat huruf kecil "S" di requestFullscreen() dan mengubah document.webkitCancelFullScreen() menjadi document.webkitExitFullscreen(). Komentar kompatibilitas browser diperbarui.
Diperbarui 11-02-2014: untuk menyertakan awalan IE, menambahkan sintaksis CSS standar, dan memperbarui komentar kompatibilitas browser. Terima kasih @dstorey dan @patrickkettner.