フルスクリーンが流行ってる。
フルスクリーンapiなるものがあるらしいので試してみた。
どうやら、特定の要素をフルスクリーン指定できるみたい。
var elm = document.getElementById("face");
if (elm.webkitRequestFullScreen) // chrome, safari
elm.webkitRequestFullScreen();
else if (elm.mozRequestFullScreen) // firefox
elm.mozRequestFullScreen();
else
elm.requestFullScreen(); // others
フルスクリーン時にだけ特定のスタイルを適応させることもできるらしい。
それが下のCSS擬似クラス
:-webkit-full-screen
:-moz-full-screen
注意点として、chromeはフルスクリーン時に拡大とか勝手にしてくれないので、
こういった擬似クラスを利用しないといけない。
firefoxは勝手に画面サイズに合わせてくれる。
うーん、これもブラウザ間で動作が違うのか・・