HTML5 ile Tam Ekran (Full Screen)

Vatanay Özbeyli HTML5, Tasarım Unsurları

Önceki yıllarda Flash ile yaptığımız tam ekran (Full Screen) desteği artık HTML5 ile rahatça yapılabilmekte. Tek yapmanız gereken Section tagını doğru kullanmak.

Vereceğim örnek section içerisindeki görsel ile çalışmakta. Yani resmin orjinal boyutunu gösterebileceğiniz bir çalışma. Fakat siz isterseniz CSS kodlarıyla biraz oynayıp farklı tekniklerde kullanabilirsiniz.

ÖRNEĞİ GÖRÜNTÜLE

Kullanacağım görsel : 

Uygulama

İlk olarak aşağıdaki HTML kodları sayfamızın <body><body> tagı içerisinde görselin küçük halinin görünmesini istediğiniz alana koyuyoruz. Aşağıda Section’ı derleyici ve görüntüleyici olmak üzere iki işlev için kullanıyoruz.

<section id="tamekran"><img src="https://www.adobewordpress.com/ads/300x250.jpg" alt="AdobeWordPress.com" /></section>
<script>
var e = document.getElementById("tamekran");
e.onclick = function() {
if (RunPrefixMethod(document, "tamekran") || RunPrefixMethod(document, "IsFullScreen")) {
RunPrefixMethod(document, "CancelFullScreen");
}
else {
RunPrefixMethod(e, "RequestFullScreen");
}
}
var pfx = ["webkit", "moz", "ms", "o", ""];
function RunPrefixMethod(obj, method) {
var p = 0, m, t;
while (p < pfx.length && !obj[m]) {
m = method;
if (pfx[p] == "") {
m = m.substr(0,1).toLowerCase() + m.substr(1);
}
m = pfx[p] + m;
t = typeof obj[m];
if (t != "undefined") {
pfx = [pfx[p]];
return (t == "function" ? obj[m]() : obj[m]);
}
p++;
}
}
</script>

Şimdi ise CSS kodlarımızı hazırlayalım.

section{width:150px;}

section img{
width: 100%;
}

section:-webkit-full-screen{
float: none;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
border: 0 none;
background-color: white;
}

section:-moz-full-screen{
float: none;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
border: 0 none;
}

section:-ms-full-screen{
float: none;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
border: 0 none;
}

section:-o-full-screen{
float: none;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
border: 0 none;
}

section:full-screen{
float: none;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
border: 0 none;
}

Bu kadar…