[JavaScript] ウィンドウサイズ変更時に処理を行う（onResize）

投稿日：2018年7月23日

ウィンドウサイズ変更時に処理を行うには、onResizeイベントハンドラを使用します。

サンプルソース

例）ウィンドウサイズ変更時に、画面サイズをコンソールに出力する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ウィンドウサイズ変更時に処理を行うサンプル</title>
<script>
  window.onresize = function(){
    var w = window.innerWidth;
    var h = window.innerHeight;

    console.log(w + "x" + h);
  }
</script>
</head>
<body>
  <p>ウィンドウサイズ変更時に、画面サイズをコンソールに出力します。</p>
</body>
</html>

<!DOCTYPE html>

<head>

<title>ウィンドウサイズ変更時に処理を行うサンプル</title>

window.onresize = function(){

var w = window.innerWidth;

var h = window.innerHeight;

console.log(w + "x" + h);

}

</script>

</head>

<body>

<p>ウィンドウサイズ変更時に、画面サイズをコンソールに出力します。</p>

</body>

</html>

解説

ウィンドウサイズ変更時には、onResizeイベントハンドラが呼び出されます。

執筆者：とら