JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでブラウザウィンドウの内側の高さと幅を取得する方法

JavaScriptのwindowオブジェクトは、ブラウザウィンドウそのものを表すオブジェクトです。この機能はすべての主要なブラウザでサポートされており、追加のライブラリなしですぐに利用できます。

ブラウザウィンドウの内側の高さ（innerHeight）と内側の幅（innerWidth）を取得するには、windowオブジェクトが提供する以下のプロパティを使用します。

  • window.innerWidth … ウィンドウの内側の幅を取得
  • window.innerHeight … ウィンドウの内側の高さを取得

これらのプロパティを使えば、ブラウザウィンドウのサイズを簡単に取得できます。ここでは、それぞれの使い方を個別に解説します。

内側の幅（Inner Width）を取得する

次の例では、window.innerWidthプロパティを使用して、ブラウザウィンドウの内側の幅を取得し、結果を画面に表示しています。取得できる値の単位はピクセル（px）です。

コード例

<html>
<body>
<p id="width"></p>
<script>
   var w = window.innerWidth;
   var x = document.getElementById("width");
   x.innerHTML = "ブラウザの内側の幅: " + w + "px";
</script>
</body>
</html>

出力結果

ブラウザの内側の幅: 598px

このように、表示中のブラウザウィンドウのコンテンツ領域の幅がピクセル単位で数値として返されます。ウィンドウのサイズを変更すると、値もリアルタイムに変化することに注意してください。

内側の高さ（Inner Height）を取得する

次の例では、window.innerHeightプロパティを使用して、ブラウザウィンドウの内側の高さを取得し、結果を画面に表示しています。こちらも結果はピクセル（px）単位で返されます。

コード例

<html>
<body>
<p id="height"></p>
<script>
   var h = window.innerHeight;
   var x = document.getElementById("height");
   x.innerHTML = "ブラウザの内側の高さ: " + h + "px";
</script>
</body>
</html>

出力結果

ブラウザの内側の高さ: 477px

まとめ

window.innerWidthとwindow.innerHeightを使うことで、ブラウザウィンドウのビューポート（コンテンツが表示される領域）の幅と高さを簡単に取得できます。レスポンシブデザインや動的なレイアウト調整を行う際に非常に便利なプロパティなので、ぜひ活用してみてください。

  1. JavaScriptで幅とアスペクト比（幅：高さ）から高さを計算する方法

    本記事では、画面の幅とアスペクト比（幅：高さ）を入力として受け取り、それに基づいて画面の高さを算出するJavaScript関数の実装方法を解説します。 問題 次の要件を満たすJavaScript関数を作成する必要があります。 第1引数として画面の幅を受け取る 第2引数としてアスペクト比（w:h の形式の文字列）を受け取る これら2つの入力値をもとに、画面の高さを計算して返す コード例 以下がその実装コードです。 {     const [w, h] = ratio     .split(:)  &n

  2. C#でコンソールの最大ウィンドウサイズ（高さ・幅）を取得する方法

    C#では、Consoleクラスが提供するプロパティを使うことで、コンソールウィンドウに設定可能な最大の高さと幅を簡単に取得できます。それぞれConsole.LargestWindowHeightとConsole.LargestWindowWidthというプロパティを使用します。これらのプロパティは、現在の画面解像度やフォントサイズに基づいて、コンソールウィンドウが取り得る最大の行数（高さ）と列数（幅）を整数値で返します。コンソールアプリケーションで表示領域を動的に調整したい場合などに役立ちます。コンソールの最大ウィンドウ高さを取得する例以下のコードは、コンソールの最大ウィンドウ高さを取得して表