ブラウザの全画面表示を判定する
この簡単そうな事が現在の JavaScriptでは難しく、ツール制作上で困りました。 そこから「ウインドウサイズ」と「ディスプレイサイズ」を比較する手法を採り入れ、好結果を得たのですが、この手法の再検証の必要を感じています。 それは、これまでのコードは「全画面表示でスクロールバーが表示されていない」「ブラウザ拡大をしていない」という前提で、それらの条件についてチェックが不完全なためです。
各種ウインドウサイズを JavaScriptで取得するテストツール
「ウインドウ」のサイズは、JavaScriptで簡単に取得できます。 以下は少し旧いですが、判り易いので参考にした記事です。
上記のページに纏められた各種のプロパティを参考に、「全画面表示」の判定に必要なプロパティを実際にJavaScriptで取得するツール「FullScreen Size」を制作しました。 ブラウザの時代による変化、あるいはブラウザの種類によって、プロパティの扱いが異なる可能性があります。 このツールを使えば、現在の目的の判定に使えるかどうかを検証できます。
「FullScreen Size」がチェックするプロパティ
以下は、「FullScreen Size」でチェックするプロパティです。
| JavaScriptで取得するプロパティ | ||
| 幅 | screen.width | ❶ |
| document.documentElement.clientWidth | ❷ | |
| window.innerWidth | ❸ | |
| window.outerWidth | ❹ | |
| 高さ | screen.height | ① |
| document.documentElement.clientHeight | ➁ | |
| window.innerHeight | ➂ | |
| window.outerHeight | ④ |
下は、表のそれぞれのプロパティが示す部分の模式図です。
「FullScreen Size」の扱い方
「FullScreen Size」を「Tampermonkey」にインストールして、任意のウェブページを開くと、そのページを表示するウインドウの上記の値が一覧表示されます。
▪ このツールはショートカットスイッチはありません。「Tampermonkey」のダッシュボードで「ON / OFF」して利用します。
●「browser zoom ratio」はブラウザ拡大率を表示します。
●「幅」値は「❶ ～ ❹」、「高さ」値は「① ～ ④」の 2個の表に表示されます。
●「Scrool Bar All」を押すと、強制的に縦横のスクロールバーを表示します。
●「Not Scrool」を押すと、強制的に全てのスクロールバーを非表示にします。
▪「Scrool Bar All」「Not Scrool」の指定が機能している間はボタンが青くなります。 2個のボタンは相反した設定なので、片方を押すと他方は無効になります。
▪ 機能しているボタンを押すと無効になり、デフォルトのページ表示に戻ります。
検証結果
このページの末尾のインストールリンクから実際に「FullScreen Size」をインストールしてテストをすると、ウインドウの各種のサイズ値がリアルタイムで判ります。 Chromeでテストした結果で、私が気付いた点は以下です。
モニタースクリーンのサイズ
❶ ① の値は、信頼に足る値を常に示します。 PCではこの値を「全画面表示」の基準値にできます。
ただし、Firefoxでは ❶ ① の値はブラウザ拡大率で変化するので、Firfoxでの判定は別検証が必要です。（ブラウザ拡大がない場合は、その限りではありません）
「.clientWidth」「.clientHeight」
「document.documentElement」は「html」のことです。 ❷ ➁は、そのサイズを取得していますが、「スクロールバーを含まない」値になります。
「 .innerWidth」「.outerWidth」
❸ ❹ の値は、Chromeの場合は「通常表示」では「16」の差になります。 この差分は謎仕様です。
▪ 手作業でウインドウを1920幅のスクリーンの左右丁度に拡げた場合。
「inner」は「1920」、「outer」は「1936」 （※1）
▪「□」ボタンで「ウインドウ最大表示」とした場合。
「inner」は「1920」、「outer」は「1920」
▪「通常表示」で「F11」押下➔「全画面表示」とした場合。
「inner」は「1920」、「outer」は「1920」
▪「ウインドウ最大表示」で「F11」押下➔「全画面表示」とした場合。
「inner」は「1920」、「outer」は「1904」（※2）
何故（※1）の 16 の差が設定されるのか謎で、実測値（※1）は「1920」です。 この謎仕様は、（※2）では「outer」が「-16」と逆転し、辻褄合わせがバグを呼んだ結果の様に見えます。 当然（※2）の実測値も「1920」のはずです。
この奇妙な「outer」値の振舞いから、常に実測値を示す「inner」を「全画面表示」の判定に使いたいのですが、残念なことに「ブラウザ拡大率」によって「inner」値は変化します。「outer」値は変化しません。「inner」値を「ブラウザ拡大率」の補正をして判定に使うと確実ですが、計算誤差の扱いが必要になり、コードが複雑になります。
「outer」を使った場合に、判定で問題になるのは「ウインドウ最大表示」に関係した場合だけなので、ここは目をつぶるべきかも。
以上の考えを元にした、「幅」を比較する「全画面表示」を判定するコードです。
◎ 判定は、ブラウザ拡大率やスクロールバーの有無に影響されません。
◎ Chrome・Edge 、ブラウザ拡大が無い条件下では Firefox も利用できます。
◎「ウインドウ最大表示」と「全画面表示」を区別できないため、「最大表示」を「全画面表示」と誤判定します。
◎「ウインドウ最大表示」から「F11」を押下した場合、「全画面表示」を判定できずに「通常表示」と誤判定します。 Firefxではこの問題はありません。
「innerHeight」「.outerHeight」
➂ ④ の違いは、「通常表示」では「95」の差になります。 これは Chromeの場合で
Firefoxでは「93」の差です。 ただしどちらも「ブックマークバー」等を表示すると更に差が大きくなります。
▪ 手作業でウインドウを1080の高さのスクリーンの上下丁度に拡げた場合。
「inner」は「992」、「outer」は「1087」 （※3）
▪「□」ボタンで「ウインドウ最大表示」とした場合。
「inner」は「991」、「outer」は「1080」
▪「通常表示」で「F11」押下➔「全画面表示」とした場合。
「inner」は「1080」、「outer」は「1080」
▪「ウインドウ最大表示」で「F11」押下➔「全画面表示」とした場合。
「inner」は「1080」、「outer」は「1064」（※4）
先と似た様な謎仕様で、（※3）は実測値「1080」より「7」大きな値になります。 そこから「95」を引いた「992」が「inner」というのは理屈は合っています。 （※4）では「outer」が「-16」と逆転し、これも先と同様の奇妙な差値です。
「ウインドウ」と「スクリーン」の高さを比較する場合、「innerHeight」は「ブラウザ拡大率」の影響を受けるので、やはり「.outerHeight」を使う事になります。
「outer」を使った場合、判定で問題になるのは「ウインドウ最大表示」が関系した場合だけですから、その場合だけ考慮する必要があります。
◎ 判定は、ブラウザ拡大率やスクロールバーの有無に影響されません。
◎ Chrome・Edge 、ブラウザ拡大が無い条件下では Firefox も利用できます。
◎「ウインドウ最大表示」と「全画面表示」を区別できないため、「最大表示」を「全画面表示」と誤判定します。
◎「ウインドウ最大表示」から「F11」を押下した場合は、「全画面表示」を判定できずに「通常表示」と誤判定します。 Firefxではこの問題はありません。
「FullScreen Size」 各種ウインドウサイズを表示
このツールは、Chrome / Edge / Firefox 上の「Tampermonkey」で利用できます。
「FullScreen Size」のインストール・更新
● 以下のリンクを押すと「Tampermonkey」に 「FullScreen Size」のガイドが起動し、「インストール・更新」ができます。
●「Tampermonkey」の「インストール済み UserScript」の画面を「 リロード」すると、新しい登録が反映します。