★Webページ作成支援~Simple Style★

ウィンドウのサイズを取得するWindow size

Javascriptで、ウィンドウのサイズを取得する方法は、ブラウザによって違います。
自分なりに調査しましたが、未だ良く分からない部分があります。
誤表記の場合があると思いますが、参考程度にご覧ください。

略称表記
IE:Internet Explorer

ウィンドウサイズを取得するプロパティProperty

ウィンドウサイズ取得に関するプロパティ一覧(標準準拠モード)
プロパティ 意味 備考
window.outerWidth
window.outerHeight
ウィンドウ外枠の横幅/高さ ※1
window.innerWidth
window.innerHeight
ウィンドウの内側(コンテンツ表示領域)の横幅/高さ
(スクロールバーのサイズを含む)
※1
document.
documentElement.clientWidth
document.
documentElement.clientHeight
ウィンドウの内側(コンテンツ表示領域)の横幅/高さ
(スクロールバーのサイズを除く)
document.body.clientWidth
document.body.clientHeight
ウィンドウ内側(表示領域)の横幅/高さ
(スクロールバーのサイズを除く)
※2
window.pageXOffset
window.pageYOffset
現在の要素がウィンドウの左上隅から水平/垂直にスクロールされたサイズ
document.body.scrollLeft
document.body.scrollTop
現在の要素がウィンドウの左上隅から水平/垂直にスクロールされたサイズ
document.
documentElement.scrollLeft
document.
documentElement.scrollTop
現在の要素がウィンドウの左上隅から水平/垂直にスクロールされたサイズ
document.body.scrollWidth
document.body.scrollHeight
ドキュメントページの横幅/高さ ※3
document.
documentElement.scrollWidth
document.
documentElement.scrollHeight
ドキュメントページの横幅/高さ ※3
※1:IE8以下では取得できません。
※2:標準準拠モードと互換モードでは値が変わってきます。
※3:ブラウザにより異なります。

ウィンドウのサイズを取得するプロパティ


「d.scrollTop/d.scrollLeft」「d.clientWidth/d.clientHeight」の「d.」は、「document.body」または「document.documentElement」、他「w.」は「window」を省略しています。

ウィンドウ全体のサイズouterWidth/outerHeight

ウィンドウ全体のサイズを取得するサンプル
JavaScript
// ウィンドウ全体のサイズを取得する
function getOuter(){
  var obj = new Object();
  if( window.outerWidth ){
    obj.w = window.outerWidth;
    obj.h = window.outerHeight;
  }
  else{
    obj.w=(document.documentElement.clientWidth ||
           window.document.body.clientWidth)+24;
    obj.h=(document.documentElement.clientHeight ||
           window.document.body.clientHeight)+128;
  }
  return obj;
}
ウィンドウ全体のサイズ取得(window.outerWidth/window.outerHeight)は、 Netscape、Safari、Opera6、Internet Explorer9以上の限定です。
Internet Explorer8 以前ではウィンドウ全体のサイズをが取得できないため、ウィンドウ内サイズを取得し、メニューやボタン、ステータスバーのサイズを適度に加算し算出しています。
ウィンドウ全体の横幅 = ウィンドウ内横幅 + 24;
ウィンドウ全体の縦幅 = ウィンドウ内縦幅 + 128;

ウィンドウ内部のサイズinnerWidth/innerHeight

ウィンドウ内側のサイズを取得するサンプル
JavaScript
// ウィンドウの内側のサイズを取得する
function getWindowSize() {
  var obj = new Object();
  if( window.innerWidth ){
    obj.w = window.innerWidth;
    obj.h = window.innerHeight;
  }
  else if ( document.documentElement && 
            document.documentElement.clientWidth != 0 ){
    obj.w = document.documentElement.clientWidth;
    obj.h = document.documentElement.clientHeight;
  }
  else if ( document.body ){
    obj.w = window.document.body.clientWidth;
    obj.h = window.document.body.clientHeight;
  }
  return obj;
}
ウインドウの内側、つまりブラウザのコンテンツ表示領域の横縦幅の値を持つ、windowオブジェクトの「innerWidth/innerHeight」プロパティがあります。しかし、このプロパティは、Internet Explorer9 以前では、サポートされていません。
しかし、「clientWidth/clientHeght」属性と「innerWidth/innerHeight」プロパティは、ドキュメント内は同じ値となるので、Internet Explorerで、ウインドウの内側の横縦幅の値を取得する時には、この「clientWidth/clientHeight」属性を使用すればよいことになります。読み出し専用。


「clientWidth/clientHeight」
documentElement要素の場合もありますが、標準準拠モードと互換モード、あるいはWebブラウザの種類によって値が異なるので注意が必要です。
標準準拠モードではドキュメント全体、互換モードでは、ウィンドウ表示領域のサイズを取得します。
この場合、スクロールバーが測定値に含まれません


スクロールバーのサイズ
上記のようなマルチブラウザ対応の条件文で取得すると、最新のブラウザでは、
「window.innerWidth/innerHeight」での結果となります。
スクロールバーのサイズを含んだブラウザの縦横幅となるので、ドキュメント内のサイズにしたい場合、スクロールバーのサイズを引いておく。
殆んどのブラウザでは、スクロールバーのサイズは17pxだと分かりましたが、Operaでは少し違うようです。よって下記のようにしました。
Example
  //ドキュメント内のサイズ
    obj.w = window.innerWidth  -18;
    obj.h = window.innerHeight -18;

スクロールの量scrollLeft/scrollTop

スクロール量を取得するサンプル
「window.pageXOffset/window.pageYOffset」「window.scrollX/window.scrollY」プロパティで、ページの左端/上端からの位置を取得できます。しかし、前者はIE9からサポートし、後者はIEではサポートしていませんし、読み込み専用で設定はできません。
よって、以下のプロパティで、スクロール量を取得します。
JavaScript
// ページスクロール量を取得する
function getScrollSize() {
  var obj = new Object();
  if( window.pageXOffset || window.pageYOffset ){
    obj.x = window.pageXOffset;
    obj.y = window.pageYOffset;
  }else{
    obj.x = document.documentElement.scrollLeft ||
            document.body.scrollLeft;
    obj.y = document.documentElement.scrollTop ||
            document.body.scrollTop;
  }
  return obj;
}

ドキュメントページのサイズの取得scrollWidth/scrillHeight

要素のサイズを取得するサンプル
JavaScript
// ドキュメントのサイズを取得する(要素ページのサイズ)
function getDocumentSize() {
  var obj = new Object();
  obj.w = document.documentElement.scrollWidth  || document.body.scrollWidth;
  obj.h = document.documentElement.scrollHeight || document.body.scrollHeight;
  return obj;
}

要素サイズ取得系は、以下の2つがある。

offsetWidthとoffsetHeight
scrollWidthとscrollHeight

書式の例:
element.offsetWidth
//戻り値の型:数値

それぞれ似ているので違いをまとめると以下の表のようになる。
offsetWidth
offsetHeight
width/height + padding + borderを返す。
配置に応じた要素の幅・高さを取得
scrollWidth
scrollHeight
width/height + paddingを返す。
通常はclientWidthおよびclientHeightと同じ。ただし、要素の内容が表示領域の幅や高さを超えた場合、内容が占めるであろう幅と高さを返す。
(スクロールバーで隠れている領域を含むサイズが取得できる)


ブラウザによって値が違うもの
①document.documentElement.offsetWidth
②document.documentElement.offsetHeight
IE11、Firefox,  Chrome, Safariだと
①…scrollWidthと同じサイズを返す
②…scrollHeightと同じサイズを返す

IE9では、
①…window.innerWidthと同じサイズを返す
②…clientHeightと同じサイズを返す

また、標準/互換モードによっても取り方が違い、統一性が無い。
ウィンドウサイズより、要素の方が小さい場合には、ウィンドウサイズになります。
結局、offsetWidth/offsetHeightではサイズの統一性がなかったので、scrollWidth/Heightを使用。


Tips

FireFoxでは、window.scrollMaxX、window.scrollMaxYというプロパティがあって、これらはスクロールバーで隠れた領域のサイズのみを取得することが出来ます。


ウィンドウサイズ取得のHTMLサンプルSample


ウィンドウのサイズを取得する

プロパティ別にウィンドウサイズを取得する


付記-マウスの座標を取得するMouse coordinate

マウスのXY座標の取得のサンプルもついています。
マウスの座標を取得するサンプルソースは「マウスの座標を取得する」を参照してください。
ラインを表示