ChromeでFullScreen API試してみたけどけっこう限られるね

タイトルの通り。

デモ用のアプリのモックをHTMLで作る必要があって、画面いっぱいに表示したいからFullScreen API使えばいいんじゃね？と思ったけど、意外と制限多かったのでメモ。

1. 画面遷移が発生すると解除される。

FullScreen APIで全画面表示にした後に、表示しているコンテンツ上でリンク押下等で画面遷移が起こると、全画面表示が解除される。
仕様書やドラフトの資料で確認したわけではないけれど、今の所再現率100%。
おそらく、フィッシング詐欺等の対策。

2. onloadやsetTimeout等で自動実行してもリジェクトされる。

こちらも状態は再現するけど、仕様として合ってるかは不明。
例えば、以下のような感じ。

// 全画面表示の実行
function enterFullscreen () {
  var x = document.body;
  if (x.webkitRequestFullScreen) {
    x.webkitRequestFullScreen();
  } else {
    x.requestFullScreen();
  }
}

// 1. onload版
window. unload = function () {
    enterFullscreen();
};

// 2. setTimeout版
setTimeout(function(){
    enterFullscreen();
}, 1000);

これは、1も2も動かない。
これもフィッシング詐欺防止の仕様だろうとおもうけど、未確認。

ではどうするか

今の所、ボタン押下等のユーザの主体的なアクションをもとにrequestFullScreenを実行するしかないみたい。
あと、画面遷移したりぐりぐり全画面上で動かすなら、WebGLかな？
iframeで楽しようかともおもったけど、mozillaの資料見る限り面倒そう。。。