HTML5 ile birlikte gelen çok sayıda API iyiliği geldi ve en iyilerden biri de tarayıcı için sadece flaşın mümkün olan en kısa sürede yapılabilmesi için yerel bir yol sağlayan Tam Ekran API'siydi: Web sayfasını kullanıcı için tam ekran modunda göster.
Bu, video veya resim görüntülüyorsanız veya bir oyun geliştiriyorsanız kullanışlıdır. Aslında, odaklanması gereken herhangi bir içerik Tam Ekran API'sinden yararlanabilir.
Ve hepsinden önemlisi, Fullscreen API'nin kullanımı gerçekten çok kolay…
Bir dizi yöntem Tam Ekran API'sinin bir parçasıdır:
element.requestFullScreen()Bu yöntem, tek bir öğenin tam ekrana gitmesini sağlar.
Document.getElementById(“myCanvas”).requestFullScreen()Bu, 'myCanvas' kimliğine sahip tuvalin tam ekrana gitmesine neden olur.
document.cancelFullScreen()Bu, tam ekran modundan çıkar ve belge görünümüne geri döner.
Document.fullScreenKullanıcı tam ekran modundaysa, bu geri döner.
document.fullScreenElementŞu anda tam ekran modunda olan öğeyi döndürür.
Bunların standart yöntemler olduğunu unutmayın, ancak şu anda Chrome, Firefox ve Safari'de bu işi yapmak için satıcı öneklerine ihtiyacınız olacaktır (Internet Explorer ve Opera şu anda bu API'yi desteklememektedir).
Öncelikle, tarayıcının hangi yöntemi kullandığını bulmamız gerektiğinden, tarayıcı için doğru yöntemi bulacağımız bir işlev yaratacağız ve buna göre:
//helper functionfunction fullScreen(element) {if(element.requestFullScreen) {element.requestFullScreen();} else if(element.webkitRequestFullScreen ) {element.webkitRequestFullScreen();} else if(element.mozRequestFullScreen) {element.mozRequestFullScreen();}}Görebildiğiniz gibi, bu işlev requestFullScreen yöntemlerinden herhangi birinin true değerini döndürüp döndürmediğini görür ve sonra da satıcı önekini kullanarak doğru tarayıcı işlevini çağırır.
Bundan sonra yapmamız gereken, fullScreen işlevini şöyle çağırmaktır:
//for the whole pagevar html = document.documentElement;fullScreen(html); // For a specific element on the pagevar canvas = document.getElementById('mycanvas');fullScreen(canvas);Bu, tam ekrana gitme iznini isteyen kullanıcıya bir ileti gönderir, eğer kabul edilirse, tarayıcıdaki tüm araç çubukları kaybolur ve ekrandaki tek şey istenen web sayfası veya tek öğe olacaktır.
Bu yöntem ayrıca satıcı öneklerini gerektirir, bu yüzden yukarıdakiyle aynı fikri kullanırız ve kullanıcının tarayıcısına göre hangi ön ekini kullanacağımızı belirleyecek bir işlev oluştururuz.
Dikkat edeceğiniz bir şey, bu yöntemin, requestFullScreen yönteminden farklı olarak, her zaman tüm belgeye uygulandığından, herhangi bir öğeye geçilmesine gerek olmamasıdır.
// the helper functionfunction fullScreenCancel() {if(document.requestFullScreen) {document.requestFullScreen();} else if(document .webkitRequestFullScreen ) {document.webkitRequestFullScreen();} else if(document .mozRequestFullScreen) {document.mozRequestFullScreen();}}//cancel full-screenfullScreenCancel();Bu JavaScript API'sı ile birlikte gelen, tam ekranlı bir CSS sözde sınıfı geldi ve bu, tam ekran modundayken web sayfasındaki herhangi bir öğeyi biçimlendirmek için kullanılabilir. Bu, tarayıcı boyutu biraz arttığından kullanışlı olabilir. tam ekran modu.
/* Changing something in the body */:-webkit-full-screen {font-size: 16px;}:-moz-full-screen {font-size: 16px;}/*Only one element*/:-webkit-full-screen img {width: 100%;height: 100%;}:-moz-full-screen img {width: 100%;height: 100%;}Tarayıcı öneklerini virgülle ayıramayacağınızı unutmayın, çünkü tarayıcı bunları okumaz:
/* This will not work */:-webkit-full-screen img,:-moz-full-screen img {width: 100%;height: 100%;}Stillerin düzgün bir şekilde uygulanabilmesi için her satıcının önekini kendi bloğuna yerleştirmelisiniz.
Bu JavaScript API'si, HTML5 ile gönderilen en az bilinenlerden biridir, ancak bence hem etkili hem de basittir. Özellikle video, görüntü ve oyunlar için tek bir öğeye odaklanmanın geliştirilmiş kullanıcı deneyimi, ilgili kodun birkaç satırına değecektir.
Tam Ekran API'sını herhangi bir yere mi uyguladınız? Bunun için ne kullanırsınız? Yorumlarda bize bildirin.
Öne çıkan görsel / küçük resim, odaklama resmi Shutterstock üzerinden.