2018年12月3日(月)
ブラウザの全画面表示 #■パソコン・通信

　Windowsパソコンにおいて、Microsoft Edge、IE11、Google Chrome、Firefox、Opera のブラウザは、キーボードの[F11]を押すと『全画面表示』になります。全画面表示を終了するには、もう一度[F11]を押します。

　Fullscreen APIは、パソコンのブラウザではサポートされていません。なので、全画面表示に関しては、独自のプログラミングが必要です。

　測定の条件は下記の通りです。

・解像度W1366xH768
・Windows10
・タスクバーを表示する場合、位置は下。
・ブラウザを最大化。

　スクリーン画面の大きさに関して、JavaScriptでは4つのパラメータがあります。すべてのブラウザで、同じ値になります。

　　タスクバー　　　有り 無し
screen.availWidth : 1366 1366
screen.availHeight:  728  768
screen.width      : 1366 1366
screen.height     :  768  768
※タスクバーの高さが40pxということ。

　ブラウザ画面の大きさに関して、JavaScriptでは4つのパラメータがあります。

window.innerWidth （以後、iWと表記）
window.innerHeight（以後、iHと表記）
window.outerWidth （以後、oWと表記）
window.outerHeight（以後、oHと表記）

　ようやく、すべての最新ブラウザで定義されるようになったのですが、その値はブラウザごとに微妙に異なっています。

[Microsoft Edge]
　　タスクバー
　　有り 無し 全画面表示
iW: 1366 1366 1366
iH:  651  691  768
oW: 1382 1382 1366
oH:  744  784  768

[IE11]
　　タスクバー
　　有り 無し 全画面表示
iW: 1366 1366 1366
iH:  650  689  767
oW: 1382 1382 1366
oH:  744  784  768

[Google Chrome]
　　タスクバー
　　有り 無し 全画面表示
iW: 1366 1366 1366
iH:  657  695  768
oW: 1366 1366 1350
oH:  728  768  752

[Firefox]
　　タスクバー
　　有り 無し 全画面表示
iW: 1366 1366 1366
iH:  654  693  767
oW: 1382 1382 1366
oH:  744  784  768

[Opera]
　　タスクバー
　　有り 無し 全画面表示
iW: 1366 1366 1366
iH:  658  696  768
oW: 1366 1366 1350
oH:  728  768  752

・Microsoft EdgeとIE11とFirefoxにおいて、全画面表示で無い場合、oWとoHが解像度より大きいのが不可思議。
・Google ChromeとOperaにおいて、全画面表示で、iH（内）がoH（外）より大きくなっているのが不可思議。

　いずれも16px差ということは、スクロールバー分が絡んでいると推測できます。

　とりあえず、全画面表示の判別は、こんな感じで。
--
if(screen.height-window.innerHeight <= 1){
  // 全画面表示

}else{

}
--

　さらに、タスクバーの位置を上、左、右の場合を検証しました。上は、すべて検証していませんが、下と同じようです。


【タスクバーの位置：左または右】

　　タスクバー　　　有り 無し
screen.availWidth : 1273 1366
screen.availHeight:  768  768
screen.width      : 1366 1366
screen.height     :  768  768
※タスクバーの幅が93pxということ。

[Microsoft Edge]
　　タスクバー
　　有り 無し 全画面表示
iW: 1273 1366 1366
iH:  691  691  768
oW: 1289 1382 1366
oH:  784  784  768

[IE11]
　　タスクバー
　　有り 無し 全画面表示
iW: 1273 1366 1366
iH:  689  689  767
oW: 1289 1382 1366
oH:  784  784  768

[Google Chrome]
　　タスクバー
　　有り 無し 全画面表示
iW: 1273 1364 1366
iH:  697  697  768
oW: 1273 1366 1350
oH:  768  768  752

[Firefox]
　　タスクバー
　　有り 無し 全画面表示
iW: 1273 1365 1366
iH:  694  694  767
oW: 1289 1382 1366
oH:  784  784  768

[Opera]
　　タスクバー
　　有り 無し 全画面表示
iW: 1273 1364 1366
iH:  698  698  768
oW: 1273 1366 1350
oH:  768  768  752

　やってみないと分からないということで、予想と異なっていました。タスクバーの位置に関係なく、全画面表示でのそれぞれの値は同じでした。 先の判別式にwidth関連を加えて完成です。

--
if(screen.width == window.innerWidth && screen.height-window.innerHeight <= 1){
  // 全画面表示

}else{

}
--


P.S. Safariのデータも欲しいですね。iPhone5c保有者ですが、iPadやiMacは持っていないので、どなたか試してみてもらえないでしょうかm(__)m


P.S.2 Microsoft Edgeが出始めの頃、スクロールバーの幅が他のブラウザより太くて、厄介だったことを思い出しました。


http://neconote.jp/prg/w_h.html