Çoğu tarayıcıda bir süredir tam ekran veya kiosk moduna girme özelliği mevcuttur. Temel olarak, tarayıcının Chrome kullanıcı arayüzü devre dışı bırakılır ve içerik ön plana çıkar. Chrome Web Mağazası'ndan yüklenen uygulamalarda kullanıcılar, uygulamayı yeni sekme sayfasından açıldığında tam ekranda çalışacak şekilde manuel olarak yapılandırabilir. Manuel tam ekran iyidir. Programatik tam ekran daha iyidir.
Fullscreen API, web uygulamalarının JavaScript'den sayfadaki herhangi bir içeriğe tarayıcıda tam ekran görüntüleme moduna girmesini programlı olarak söylemesine olanak tanır. Bu sayede WebGL ve <canvas> oyunları nihayet tamamen etkileyici hale gelebilir, videolar sinema ekranı gibi, online dergiler ise gerçek gibi görünebilir. Tarayıcıya bayılıyorum ancak bu konuda kısıtlanmamız gerekmiyor :)
Ayrıntıları atlamak istiyorsanız demoyu izleyin:
Peki API nasıl çalışır? Örneğin, bir <div>'ün tam ekrana geçmesini istiyorsanız bunu şu şekilde yapabilirsiniz:
div.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
div.mozRequestFullScreen();
div.msRequestFullscreen();
div.requestFullscreen(); // standard
Ardından, tam ekrandan çıkmak için document bir yöntem sunar:
document.webkitExitFullscreen();
document.mozCancelFullScreen();
document.msExitFullscreen();
document.exitFullscreen();
Tam ekran modundaki içerik, tarayıcının görüntü alanında ortalanmalıdır. Bu içeriğin görüntülemeye en uygun şekilde biçimlendirilmesi geliştiricinin sorumluluğundadır. Genellikle <div>'ünüzün ekranın tüm alanını kaplamasını istersiniz. Neyse ki API, bu işlem için yeni CSS sözde seçicileri içeriyor:
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 sözde seçicileri, tam ekran içeriği istediğiniz şekilde biçimlendirmeyi çok kolaylaştırır.
Tam Ekran API'si, Chrome 15, FF 14, IE 11 ve Opera 12.1'de varsayılan olarak etkindir. API'nin geri kalanı hakkında daha fazla bilgi için özelliğe bakın.
11.10.2012 tarihinde güncellendi: Spesifikasyon değişikliklerine uygun olması için. requestFullscreen()'teki "S" harfi küçük harf olarak değiştirildi ve document.webkitCancelFullScreen(), document.webkitExitFullscreen() olarak değiştirildi. Tarayıcı uyumluluğuyla ilgili yorum güncellendi.
11.02.2014 tarihinde güncellendi: IE için ön ekler dahil edildi, standart CSS söz dizimi eklendi ve tarayıcı uyumluluğu yorumu güncellendi. Teşekkürler @dstorey ve @patrickkettner.