WEBブラウザの全画面表示「requestFullscreen」

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

インターネットブラウザは無敵アプリです。
HTML5の普及により、できる事がかなり増えて、スマートフォンのネイティブアプリを凌駕するほどになっています。
 

GoogleがChromeOSをまだまだPUSHしている理由はそれほどまでに高機能なインターネットブラウザで、世の中のPC作業はほとんど完了してしまうというコンセプトですが、十分理解できますね。
 

今回は、そんなWEBブラウザの全画面表示機能をとあるサービスに導入してみたときの、対応方法や、特性についてまとめてみました。

WEBブラウザの全画面対応について

一番よく使われている場面は、Youtubeなどの動画サイトで、PC画面全体に表示する機能として使われているのを見かけますが、
 

実は、この機能、動画表示だけで使うものではなく、特定のエレメントに対して全画面表示することが可能です。
 

スマホでは、動画を再生すると、自動的に全画面表示されてしまうので、動画専用機能だと勘違いしている人も多いようですが、任意エレメントで柔軟に使用できることを知っていれば、いろいろな場面での用途がありそうです。
 

ゲームサイトなどであれば、ページ内のゲームの部分だけを表示したりすることが可能です。
 

slideshareなどでは、プレゼンテーションをする際に拡大表示することで効果的に使えているようです。
 

現在ではベンダープレフィックスが必要

https://developer.mozilla.org/ja/docs/Web/Guide/DOM/Using_full_screen_mode
 

MDNサイトによると、

 

と解説されていますが、今現在このまま動作できるブラウザはありません。
 

ブラウザごとにベンダープレフィックスを先頭につけなければいけません。
 

そして、ブラウザ毎の対応は以下のとおりです。

ブラウザ名 プログラム
GoogleChrome webkitRequestFullscreen()
Safari webkitRequestFullscreen()
Firefox mozRequestFullScreen()
IE11 msRequestFullscreen()
Opera webkitRequestFullscreen()

マルチブラウザ対応プログラム

下記のファンクションに対して、エレメントをしていしてあげると、大体のブラウザでフルスクリーンが実行されます。
 

 

全画面を元に戻す時は、ターゲットエレメントは不要で、documentに対してキャンセルする点を間違えないようにしましょう。
ちなみに、「etc」ボタンを押すことで、キャンセルする場合は以下のように書いておけばいいです。
 

 

etcキーコードは「27」番なんですね。
 

残念ながらiOSでは対応していないようなので、今後の対応を期待しましょう。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です