JavaScript - ウィンドウのサイズを調べる

ウィンドウサイズの取得

// モニタの解像度
window.screen.width
window.screen.height

// モニタの利用可能領域
window.screen.availWidth
window.screen.availHeight

// ブラウザウインドウの表示領域
window.innerWidth
window.innerHeight

// ウィンドウ外観
window.outerWidth
window.outerHeight

// ドキュメント全体
document.body.clientWidth
document.body.clientHeight

// ドキュメントの表示領域
document.documentElement.clientWidth
document.documentElement.clientHeight

// ドキュメントの表示領域
document.documentElement.offsetWidth
document.documentElement.offsetHeight

// ドキュメントの領域全体
document.documentElement.scrollWidth
document.documentElement.scrollHeight
ウィンドウサイズを取得する
width/height
モニタの解像度を返します。
availWidth/availHeight
タスクバーなどを除くモニタの有効域を取得するためには以下のように記述します。
innerWidth/innerHeight
ブラウザウィンドウのビューポート (viewport) のピクセルサイズを返します。スクロールバーが表示されている場合は、そのサイズも含まれます。
outerWidth/outerHeight
ブラウザウィンドウの全体のピクセルサイズを返します。これらのサイズは、アドレス欄やブックマークなど周囲の UI のサイズも含まれます。
clientWidth/clientHeight
padding を含めたドキュメントの幅・高さをピクセルサイズで返します。CSS やインラインレイアウトボックスのない要素にはゼロになります。そうでなければ、ピクセル単位で要素の内側の寸法を表します。bordermargin、スクロールバーは含みません。
offsetWidth/offsetHeight
paddingborder、スクロールバーを含めたドキュメントの幅・高さをピクセルサイズで返します。
scrollWidth/scrollHeight
padding を含めたドキュメントの幅・高さをピクセルサイズで返します。画面に表示されない部分を含めた、要素のサイズです。bordermargin、スクロールバーは含みません。
ドキュメントサイズの取得
ドキュメントサイズの取得

ウィンドウサイズの変更

// 現在のウィンドウから相対的に変更する方法
window.resizeBy(width, height);

// 現在のウィンドウから絶対的に変更する方法
window.resizeTo(width, height);
ウィンドウサイズを変更する
resizeBy
現在のウィンドウを特定の量だけリサイズします。
resizeTo
現在のウィンドウサイズを動的に変更します。

関連記事

Category:
プログラミング
公開日:
更新日:
Pageviews:
41
Shares:
2
Tag:
JavaScript
コードレシピ