Fullscreen API と 闇
Fullscreen API は動画再生やゲームなど全画面にし没入させたい時などに使います。
iOS Safari と Opera Mini, Android Browser 以外のモダンブラウザで動作するようです。
Can I use... Support tables for HTML5, CSS3, etc
サンプル
下のボタンを押してみたください。
フルスクリーン対象は真ん中の DIV タグ部分となっています。
使い方
document."プレフィックス"FullscreenEnabled で Fullscreen API が使えるかどうかを調べて、
document."プレフィックス"RequestFullscreen() でフルスクリーン表示を開始します。
今回使っていませんが、"プレフィックス"ExitFullscreen() でフルスクリーン表示を元に戻すことができます。
闇
闇1
Fullscreen API は JS のメソッド、プロパティ、イベント名が現状 Fullscreen と FullScreen で混在している。
仕様では、Fullscreen の ｓ の小文字。
また、CSS は
:-webkit-full-screen
:-moz-full-screen
であるのに対して
IE は :-ms-fullscreen
仕様では :fullscreen
闇2
Safari はフルスクリーン時にトランジションかかるため若干挙動が異なり、WebKit 系、IE、Firefox で振る舞いが異なる。
闇3
iOS で使用できない
各プラットフォーム
Chrome
デフォルトでフルスクリーン対象が真ん中に配置されます。
CSS 「:-webkit-full-screen」 でフルスクリーン対象の適用領域変更することができます。
Safari
デフォルトでフルスクリーン対象が真ん中に配置されます。
CSS 「:-webkit-full-screen」 でフルスクリーン対象の適用領域変更することができますが、フルスクリーン時にトランジションがかかるため、位置変更を行うとそのトランジションがおかしくなります。
Firefox
フルスクリーン対象の部分が画面いっぱいに広がります。
そのため CSS でフルスクリーン対象部分の「:-moz-full-screen」 で幅を指定しても動作しません。
IE 11
フルスクリーン対象の部分が画面左上に配置されます。
そのため CSS 「:-ms-fullscreen」 で位置を決めないと中央には配置されません。
また、CSSで ::-ms-backdrop の背景の色などを変更できます。
IE 11 edgehtml.dll 版（Build 10041）
Firefox と同様の振舞いに変更され、JS は webkit のプレフィックスでも動く様になりました。
JS で -ms、-webkit 両方書かれている場合 -ms の方を優先するように書く用にした方が無難。
また、ドキュメントではプレフィックス無しが動作すると書かれているが動かない。
Spartan（Build 10049）
ウインドウ内で Firefox のように広がる。
何故か JS で -webkit のプレフィックスしか取れなくなった。
もちろんプレフィックス無しは動作しない。
多分バグでフィードバック済み。
モバイル
iOS では動かない。
Windows Phone 8.1 IE11、Nexus 5 Chrome、Firefox OS Simulator 2.0 で動作確認。
各デスクトップ版と動作は同じ。
Internet Explorer 11 の Fullscreen API
