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

1. windowオブジェクトを使用する方法:

   var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
   var screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
   console.log("画面の幅: " + screenWidth);
   console.log("画面の高さ: " + screenHeight);

2. screenオブジェクトを使用する方法:

   var screenWidth = window.screen.width;
   var screenHeight = window.screen.height;
   console.log("画面の幅: " + screenWidth);
   console.log("画面の高さ: " + screenHeight);

3. jQueryを使用する方法:

   var screenWidth = $(window).width();
   var screenHeight = $(window).height();
   console.log("画面の幅: " + screenWidth);
   console.log("画面の高さ: " + screenHeight);

これらの方法は、ブラウザの開発者ツールのコンソールにコードを入力するか、JavaScriptファイルにコードを書き込んで実行することで、画面の幅と高さを取得できます。

また、画面のサイズが変更された場合にリアルタイムで値を更新する必要がある場合は、resizeイベントを使用してリスナーを追加することもできます。

window.addEventListener("resize", function() {
  var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  var screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
  console.log("画面の幅: " + screenWidth);
  console.log("画面の高さ: " + screenHeight);
});

これらのコード例を使用して、JavaScriptを使って画面のサイズを取得する方法を学ぶことができます。