webkit fullscreen api

フルスクリーンが流行ってる。

フルスクリーン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は勝手に画面サイズに合わせてくれる。

うーん、これもブラウザ間で動作が違うのか・・

デモはこちら

タイトルとURLをコピーしました