ガレコレ [Garage Collection]
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
 
お問い合わせ


by Network Communication Note