あなたがフルスクリーンのAPIについて知っておくべきこと💻

フルスクリーンモードで我々のウェブページを見たいと思う多くの状況があります.ゲーム、オンラインコース、ビデオチュートリアル、または単に本を読んでいる間、より多くの読書スペースを望む.通常、これらのシナリオのシナリオでは、フルスクリーンモード(F 11)でブラウザのタブ/ウィンドウを手動で設定しますが、結果は必ずしも期待通りではありません.また、我々はユーザーが自動的に代わりにフルスクリーンに行くのを助けるならば、再び、それはより良いユーザーエクスペリエンスを持つようになります.

イントロ

Full Screen API HTMLにメソッドを追加するElement プログラムを有効にするには、ページ上の任意のコンテンツを有効にするには、Javascript経由でフルスクリーンモードで入力します.WebGL , canvas , and video 要素はフルスクリーンになると通常のターゲットです.オンライン新聞や雑誌は、これが役に立つことができる他の領域です.
では、これを最初に見てみましょう.
ここでしているのは、フルスクリーンAPIで追加されたメソッドを呼び出すことです.

const vid = document.getElementById('shuttle');

function toggleFullScreen() {
  if (!document.fullscreenElement && vid.requestFullscreen) {
    vid.requestFullscreen();
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen(); 
    }
  }
}

document.addEventListener("keydown", function(e) {
  if (e.keyCode == 13) {
    toggleFullScreen();
  }
}, false);

露出プロパティ

には2つのプロパティがありますdocument 対象:
💡 DocumentOrShadowRoot.fullscreenElementThe fullscreenElement プロパティは、現在のフルスクリーンモードで表示される要素を与えます.それは我々がフルスクリーンモードかどうかをチェックする方法です.
💡 Document.fullscreenEnabledThe fullscreenEnabled プロパティは現在のドキュメントがフルスクリーンモードを要求できる状態になっているかどうかを示します.

フルスクリーンを終了する

あなたは、彼らがあなたがESCキー(またはF 11)を押すことができるということを知っていることを確実にしたいですフルスクリーンモードを終了してください.
また、別のページに移動したり、タブを変更したり、別のアプリケーション(例えば、Altタブを使用して)に切り替えるには、フルスクリーンモードでもフルスクリーンモードを終了します.
上記の例で見たように、フルスクリーンモードを終了するにはdocument.exitFullscreen :

if (document.exitFullscreen) {
  document.exitFullscreen(); 
}

特徴検出

単に機能がサポートされているかどうかどちらかを使用して検出することができますdocument.requestFullscreen or Element.requestFullscreen :

if(element.requestFullscreen) {
  element.requestFullscreen();
}

または

if(document.requestFullscreen) {
  // enter fullscreen mode
}

フルスクリーンモードかどうかを調べる

前述の通りdocument.fullscreenElement ブラウザがフルスクリーンモードかどうかを確認する良い方法です.このプロパティの値はnull そうでなければ、現在のフルスクリーン要素でなければならない.

⚠️ There is also a boolean property called fullscreen which is deprecated and should not be used. Although most of the browsers still support it.

プレゼンテーション

プログラムモードでフルスクリーンモードを切り替えるときは、要素がどのように見えるか、画面に何が表示されるかについて責任があります.要素の幅と高さを変更する必要があることは明らかです%100 , そして、幸いにも、あなたが使用するCSS擬似セレクタがあります.

#shuttle:fullscreen {
  width: 100%;
  height: 100%;
}

また、画面上の他の要素を隠蔽して乱雑さを軽減します.

:fullscreen .hide {
  display: none;
}

ブラウザサポート

ブラウザのサポートは、この時点では、ほとんどすべての主要ブラウザは完全にそれをサポートしています.IE 11とSafariだけが部分的にサポートしています.オペラのミニとAndroidのブラウザは、この時点でそれをサポートしていません.

場合は、このAPIと幸せなフルスクリーニングを知っていない場合は、新しいトリックを学んだ希望😁).