ブラウザの「全画面表示」（フルスクリーン表示）を判定する（3）/ JavaScript

ブラウザの全画面表示を「innerHeight」で判定する 

前ページで「outerWidth」「outerHeight」を判定に利用しました。「ウインドウ最大表示」の場合には誤判定になりますが、他の場合は Chromeは判定に問題はなく、Firefoxもブラウザ拡大がなければ判定に使えます。

 

この「ウインドウ最大表示」の場合の誤判定、Firefoxでの問題を全て踏破する事を、今回は考えて見ました。 着目点は「高さ」の判定に「innerHight」を使えば、ウインドウの「タイトル部」「ツールバー」の表示が「全画面表示」では無くなるので、「ウインドウ最大表示」との区別が完全に可能だという事です。

 

ただし、「innerHight」は「ブラウザ拡大率」で値が変化するので、補正が必要です。 前ページではここで「innerHight」を放棄しましたが、今回は補正を試みます。

 

 

 

 「FullScreen Size」ver.0.2

「FullScreen Size」に「ブラウザ拡大率補正」をした「innerWidth」「innerHight」の計算値を追加しました。 補正は、以下のコードで行っています。

 

// revised innerWidth
Math.round((window.innerWidth)*(window.devicePixelRatio)) 
// revised innerHeight
Math.round((window.innerHeight)*(window.devicePixelRatio))

 

それぞれの取得値に「window.devicePixelRatio」を掛けて、計算結果の小数値を四捨五入しています。 下は「ver.0.2」の表示サンプルです。 表に補正値を表示する2行を追加しています。

 

◎「FullScreen Size」ver.0.2 のインストールは、このページ末尾のインストールリンクを使ってください。

 

ブラウザ拡大率とinnerHeight補正値の表示

 

 

上図はブラウザ拡大が無い状態の値ですが、ブラウザ拡大を行うと、「innerWidth」「innerHight」は全く異なる値を示します。 しかし、最後の2行は補正計算をしているので、おおむね拡大率に影響されない値になる事が判ります。

 

ただし、補正計算で「±1」程度の誤差が生じる拡大率があります。 しかし、この誤差は判定に全く問題になりません。 それは「高さ」方向の判定は、ブラウザの「タイトルバー」「ツールバー」の「95」前後の有無の判定になり、「1～2」の誤差の除外は簡単だからです。

 

▪ Chromeでは「innerHeight」補正値は、全拡大率に対して「screen.height」と完全に一致します。 

 

▪ Chromeの「ウインドウ最大表示」の場合、

「screen.height」と「innerHeight補正値」は、全拡大率に対して「88～92」の差があります。

 

▪ スクリプトを使って別ウインドウ表示したツールバーの無いウインドウの場合でも、「screen.height」と「innerHeight補正値」は、全拡大率に対して「60」の差があります。

 

これらの結果から、Chromeの場合は以下の判定コードが可能と思います。

 

if(window.screen.height - (window.innerHeight)*(window.devicePixelRatio) < 50 ){ ～～～ }

 

コードの「50」は、「60」以下の適当な値としたもので、これ以下の差（実際の差は「0」になりますが）は「全画面表示」以外にはありえないという事です。「全画面表示」ではなく、大変に特殊なウインドウがもしあったと想定しても、「50」を「10」程度に狭めても判定に問題はないでしょう。

 

◎ 判定は、ブラウザ拡大率やスクロールバーの有無に影響されません。

 

◎ Chrome・Edge 専用の判定コードです。

 

◎「ウインドウ最大表示」と「全画面表示」を区別できます。

 

 

 

 

Firefoxの場合 

ここまで Chromeを前提にテストして来ましたが、Firefoxで「FullScreen Size」を実行すると、大変に異なった結果になり驚きます。

 

先ず、Chromeでは「screen.width」「screen.height」を絶対値の様に扱えたのですが、Firefoxでは「ブラウザ拡大」によって変化します。 もちろん「innerHeight」も変化しますが、実はFirefoxの方は補正操作が要りません。

 

下は、あるページで「F11」で「全画面表示」を行い、「ブラウザ拡大」で中途半端な拡大率を指定したサンプルです。

 

Firefox全画面表示のブラウザ拡大率とinnerHeight

 

 

この表中で「1024」「576」の値は拡大率で変化しますが、「全画面表示」である限り常に一致した値になり、「ウインドウ最大表示」や「通常表示」では絶対に3個が一致する事はありません。 つまり、「screen.height」「innerHeight」が一致する事で「全画面表示」が判定できます。

 

if(window.screen.height==window.innerHeight){ ～～～ }

 

◎ 判定は、ブラウザ拡大率やスクロールバーの有無に影響されません。

 

◎ Firefox 専用の判定コードです。

 

◎「ウインドウ最大表示」と「全画面表示」を区別できます。

 

 

以上の様に、Chrome と Firefox では判定方法を変える必要があります。 しかし、前ページの判定の「ウインドウ最大表示」の問題は、これによって克服できます。

 

 

 

  「FullScreen Size」 各種ウインドウサイズを表示

このツールは、Chrome / Edge / Firefox 上の「Tampermonkey」で利用できます。

 

 「FullScreen Size」のインストール・更新

 

● 以下のリンクを押すと「Tampermonkey」に 「FullScreen Size」のガイドが起動し、「インストール・更新」ができます。

 

 

 

●「Tampermonkey」の「インストール済み UserScript」の画面を「  リロード」すると、新しい登録が反映します。

 

 

「FullScreen Size」がチェックするプロパティ 

以下は、「FullScreen Size」でチェックするプロパティです。

 

     
  JavaScriptで取得するプロパティ  
幅 screen.width ❶
  document.documentElement.clientWidth ❷
  window.innerWidth ❸
  window.outerWidth ❹
高さ screen.height ①
  document.documentElement.clientHeight ➁
  window.innerHeight ➂
  window.outerHeight ④

 

 

下は、表のそれぞれのプロパティが示す部分の模式図です。

 

ウィンドウサイズ表示の模式図