読者です 読者をやめる 読者になる 読者になる

Browser

Microsoft Edge(Project Spartan, Internet Explorer) 、ブラウザ周辺、Web フロントエンド開発、UI、など

Microsoft Edge まとめページ

Fullscreen API と 闇

Fullscreen API は動画再生やゲームなど全画面にし没入させたい時などに使います。

iOS SafariOpera Mini, Android Browser 以外のモダンブラウザで動作するようです。

Can I use... Support tables for HTML5, CSS3, etc

 

 

サンプル

下のボタンを押してみたください。
フルスクリーン対象は真ん中の DIV タグ部分となっています。

Fullscreen API

f:id:x67x6fx74x6f:20150417173109p:plain

 

使い方

document."プレフィックス"FullscreenEnabled で Fullscreen API が使えるかどうかを調べて、
document."プレフィックス"RequestFullscreen() でフルスクリーン表示を開始します。
今回使っていませんが、"プレフィックス"ExitFullscreen() でフルスクリーン表示を元に戻すことができます。

 

闇1

Fullscreen API は JS のメソッド、プロパティ、イベント名が現状 Fullscreen と FullScreen で混在している。
仕様では、Fullscreen の s の小文字。

また、CSS
:-webkit-full-screen
:-moz-full-screen
であるのに対して
IE は :-ms-fullscreen
仕様では :fullscreen

 

闇2

Safari はフルスクリーン時にトランジションかかるため若干挙動が異なり、WebKit 系、IEFirefox で振る舞いが異なる。

 

闇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 のように広がる。

f:id:x67x6fx74x6f:20150417173142p:plain


何故か JS で -webkit のプレフィックスしか取れなくなった。
もちろんプレフィックス無しは動作しない。
多分バグでフィードバック済み。

 

モバイル

iOS では動かない。
Windows Phone 8.1 IE11、Nexus 5 ChromeFirefox OS Simulator 2.0 で動作確認。
各デスクトップ版と動作は同じ。

 

Internet Explorer 11 の Fullscreen API

Fullscreen API (Windows)

スポンサーリンク