JavaScriptで現在FullScreen状態か判定するメモ

最近、ウインドウが現在フルスクリーンかどうかを判定する処理を入れる機会があったのですが、iOS の Safari でのみうまく作動しなかったので、完璧に現在フルスクリーンかどうかを判定する方法をメモ。

コード

// フルスクリーンならtrue、そうでないならfalseを返す
function isFullScreen(){
  if ((document.FullscreenElement !== undefined && document.FullscreenElement !== null) || // Firefox
      (document.webkitFullscreenElement !== undefined && document.webkitFullscreenElement !== null) || // Chrome・Safari など
      (document.msFullscreenElement !== undefined && document.msFullscreenElement !== null)){ // IE
    return true; // FullscreenElementに何か入ってる = フルスクリーン中
  } else {
    return false; // フルスクリーンではない or フルスクリーン非対応の環境(iOS Safariとか)
  }
}

解説

フルスクリーン周りの実装は未だにブラウザ間で仕様がまとまっていないらしく、
昔は document.fullscreen (Safari だけ document.webkitIsFullScreen ) を参照すればフルスクリーンかどうかを判定できたそうですが、MDN 曰く「この機能はウェブ標準から削除されました」とのこと。

Mozilla のページには「メモ: このプロパティは非推奨であり、文書が全画面モードになっているかどうかは、 Document.fullscreenElement が null ではないことで確認することができます。」と書かれていたので、最初は (document.FullscreenElement !== null || document.webkitFullscreenElement !== null) のように判定していましたが、大きな落とし穴が……。

まず、IE は document.msFullscreenElement でないと効かないらしいほか、iPhone の Safari ではそもそも Fullscreen API がサポートされていません（ iPad では一応サポートされているので余計ややこしい）。
このため、 (document.FullscreenElement !== null || document.webkitFullscreenElement !== null || document.msFullscreenElement !== null) で判定した場合に全て undefined になってしまい、フルスクリーンではないのにも関わらず true になってしまう現象が発生しました。

結局、上記のコードのように3つの FullscreenElement 全てで undefined でない & null でないことを確認して、ようやくフルスクリーンかそうでないかをどのブラウザでも正しく判定できるようになりました。

余談

Mozilla 曰く、2020年2月現在、正式な仕様である document.FullscreenElement は Firefox でしか実装されておらず、IE が msFullscreenElement な他は（旧 Edge も含め）全て webkitFullscreenElement になってしまっています。

こうしてみると全てのブラウザが FullscreenElement に対応しているように見えますが、iOS の Safari のみ「Full-screen mode is only supported on the iPad.（フルスクリーンモードは iPad でのみサポートされています）」という但し書きがあり、iPhone では FullscreenElement への対応が一切行われていません。

できるだけ早く全てのブラウザが document.FullscreenElement に統一されることを祈って、この記事の締めとします（もう数年放置されているような…）。