Fullscreen API na webu | Petr Jirásek

Použití Fullscreen API, kterým dnes disponuje většina prohlížečů, může někdy znamenat vítanou funkci pro uživatele. Typickým příkladem mohou být třeba webové hry, kdy se uživatel koncentruje jen na jeden tab a v čím větším prostoru bude moci v prohlížeči operovat, tím lepší zážitek to může znamenat.

Použití API je vcelku triviální. Pokud chcete režim full screenu vyvolat pro nějaký div, stačí zavolat jeden z těchto příkazů pro konkrétní prohlížeč:

div.webkitRequestFullscreen();
div.mozRequestFullScreen();
div.requestFullscreen(); // Opera

Pokud by jste rádi použili šikovnou funkci, pak takto:

function startFullScreen(element) {
    element.requestFullScreen();
    element.mozRequestFullScreen();
    element.webkitRequestFullScreen();
}

startFullScreen(document.documentElement); // cela stranka
startFullScreen(document.getElementById("menu")); // element s id menu

Z druhého příkladu je zřejmé, že API lze použít i na konkrétní části stránky. Díky tomu můžete třeba volat full screen třeba jen nad obsahem – bez menu, bez reklam.

Pro zrušení full screenu pak stačí zavolat tuto funkci:

function cancelFullscreen() {
    document.cancelFullScreen();
    document.mozCancelFullScreen();
    document.webkitCancelFullScreen();
}

Prohlížeče také disponují podporou pro CSS prostřednictvím pseudo selektorů:

:-webkit-full-screen {
  background: black;
}
:-moz-full-screen {
  background: black;
}

API může být v některých situacích skutečně přínosné, je ale třeba jeho využití pečlivě zvážit tak, aby uživatele nenutilo k něčemu, co sami nechtějí.

Diskuse