WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > javascriptサンプル > 「ウインドウサイズを取得」

JavaScriptでウインドウサイズを取得

JavaScriptでウインドウサイズを取得する場合、取得する箇所により関数(命令)が異なります。
一般的なスマートフォンでも下記のJavaScriptで画面サイズやブラウザサイズを取得することができます。

サンプルは全てライセンスフリーとしていますので、改変や再配布も自由です。(コメントを残していただけると幸いです)
ただし、動作の保証は一切行っておりませんのでご理解の上、ご利用ください。

広告

windowサイズ取得JavaScript関数

ウインドウサイズ
横幅
NoJavaScript意味現在値
a1screen.widthモニタサイズ(解像度)390
b1screen.availWidth タスクバーなどを除くモニタ有効域の幅390
c1window.innerWidth  (*1)ブラウザ内の表示域(スクロールバーを含む)390
d1window.outerWidth  (*1)ブラウザ表示域(ブラウザ全体の外周)390
e1document.body.clientWidthブラウザ内の表示域(スクロールバーを除く)390
f1document.body.offsetWidthブラウザ内の表示域(スクロールバーを除く)390
g1document.body.scrollWidthブラウザ内の表示域(スクロールバーを除く)
※widthを指定している場合は*2参照
390
h1document.documentElement.clientWidthブラウザ内の表示域(スクロールバーを除く)390
i1document.documentElement.offsetWidthブラウザ内の表示域(スクロールバーを除く)390
j1document.documentElement.scrollWidthブラウザ内の表示域(スクロールバーを除く)
※widthを指定している場合は*2参照
390
高さ
NoJavaScript意味現在値
a2screen.heightモニタサイズ(解像度)844
b2screen.availHeightタスクバーなどを除くモニタ有効域の高さ844
c2window.innerHeight (*1)ブラウザ内の表示域(スクロールバーを含む)844
d2window.outerHeight (*1)ブラウザ表示域(ブラウザ全体の外周)844
e2document.body.clientHeightドキュメント(body)の高さ3879
f2document.body.offsetHeightドキュメント(body)の高さ3879
g2document.body.scrollHeightブラウザにより異なる(*3)3879
h2document.documentElement.clientHeightブラウザ内の表示域(スクロールバーを除く)844
i2document.documentElement.offsetHeightドキュメント(body)の高さ3883
j2document.documentElement.scrollHeightブラウザにより異なる(*4)3883
  • (*1):IE8以下では取得できません。
  • (*2):widthが指定されている場合、bodyの幅(スクロールで非表示部分も含む)とブラウザ内の表示域(スクロールバーを除く)の大きい方となる。
  • (*3):ブラウザにより異なる。
    IE,Firefox  : ドキュメント(body)の高さ
    Chrome,Safari : ブラウザ内の表示域(スクロールバーを除く)。ただし、ドキュメント(body)の高さが最小値となる。
  • (*4):ブラウザにより異なる。
    IE,Firefox  : ブラウザ内の表示域(スクロールバーを除く)。ただし、ドキュメント(body)の高さが最小値となる。
    Chrome,Safari : ドキュメント(body)の高さ
  • IEでモニタサイズ(a-1,a-2)が実際の解像度と異なる場合は、表示の拡張/縮小が100%となっていない可能性があります。
ページTOP
広告
QrCode
このページのURL
パソコン運営 : CMAN 株式会社シーマン