İçeriğiniz Konuşuyor - Tam Ekran API'sı

Çoğu tarayıcı bir süre için tam ekran veya kiosk moduna girebilmektedir. Temel olarak tarayıcının Chrome kullanıcı arayüzü devreye girer ve içeriğin yerini alır. Chrome Web Mağazası'ndan yüklenen uygulamalarda, kullanıcıların bir uygulamayı Yeni Sekme Sayfası'ndan açtığında tam ekran çalışacak şekilde manuel olarak yapılandırması da mümkün olabilir. Manuel tam ekran modu iyidir. Programatik tam ekran daha iyidir.

Tam Ekran API'sı web uygulamalarının, programatik olarak sayfadaki herhangi bir içeriğe tarayıcının JavaScript'ten tam ekran görüntüleme moduna girmesini söylemesine olanak tanır. Bu, WebGL ve <canvas> oyunlarının nihayet tamamen sürükleyici hale geleceği, videoların beyaz ekran gibi, çevrimiçi dergilerin ise gerçekmiş gibi hissedebileceği anlamına gelir. Tarayıcıyı seviyorum, ama onu kısıtlamamalıyız :)

Ayrıntıları atlamak istiyorsanız bu demoya göz atabilirsiniz:

Tam ekran demo ekran görüntüsü

Peki API nasıl çalışır? Örneğin, bir <div> cihazının tam ekrana geçmesini isterseniz şunları söylemeniz yeterlidir:

div.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
div.mozRequestFullScreen();
div.msRequestFullscreen();
div.requestFullscreen(); // standard

Ardından, tam ekrandan çıkmak için document, bununla ilgili bir yöntem sunar:

document.webkitExitFullscreen();
document.mozCancelFullScreen();
document.msExitFullscreen();
document.exitFullscreen();

Tam ekran modundaki içerik, tarayıcı görüntü alanında ortalanır. İçeriğin görüntülenmesi için en uygun stilde olması geliştiriciye aittir. Genellikle <div> cihazınızın tüm ekran alanını kaplamasını istersiniz. İyi bir haberimiz var. API bunun için yeni CSS sözde seçiciler 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ğin stilini istediğiniz gibi belirlemeyi çok kolaylaştırır.

Tam Ekran API'sı Chrome 15, FF 14, IE 11 ve Opera 12.1'de varsayılan olarak etkindir. API'nin geri kalanı hakkında daha fazla bilgi edinmek için spesifikasyonları inceleyin.

Güncellenme tarihi: 11.10.2012: spesifikasyon değişikliklerine uygun olacaktır. requestFullscreen() içindeki "S" harfi küçük yazılmış ve document.webkitCancelFullScreen() değeri document.webkitExitFullscreen() olarak değiştirildi. Tarayıcı uyumluluğuyla ilgili yorum güncellendi.

11.02.2014 tarihinde güncellendi: IE ön eklerini dahil etme, standart CSS söz dizimini ekleme ve tarayıcı uyumluluğu yorumunu güncelleme. Teşekkürler @dstorey ve @patrickkettner.