JavaScriptで画面サイズを取得・変更する方法

画面サイズを取得する方法

横幅の取得方法

screen.width

モニターの解像度を取得

screen.availWidth

モニターの利用可能領域を取得

window.innerWidth

ブラウザウインドウの表示領域の幅(スクロールバーを含む)を取得

window.outerWidth

ウィンドウ外観の幅を取得

document.body.clientWidth

ドキュメント全体の幅を取得

document.documentElement.clientWidth

ドキュメントの表示領域を取得

高さの取得方法

screen.height

モニターの解像度を取得

screen.availHeight

モニターの利用可能領域を取得

window.innerHeight

ブラウザウインドウの表示領域の高さ(スクロールバーを含む)を取得

window.outerHeight

ウィンドウ外観の高さを取得

document.body.clientHeight

ドキュメント全体の高さを取得

document.documentElement.clientHeight

ドキュメントの表示領域を取得

画面サイズを変更する方法

現在のウィンドウから相対的に変更する方法

window.resizeBy(width, height);

 widthには現在のウィンドウサイズから拡大したい横幅、heightには現在のウィンドウサイズから拡大したい高さを半角英数字で入れます。また数字をマイナスにすると現在のウィンドウから縮小します。

現在のウィンドウから絶対的に変更する方法

window.resizeTo(width, height);

 widthには横幅、heightには高さを半角英数字で入れます。ウィンドウそのもののサイズを入力した値に変更します。


イベント

2017/12/05(火)
Design Thinking Square