見出し画像

【JavaScript】window.innerHeight　ってなに？🤔

ごろじ

`window.innerHeight`は、ブラウザのウィンドウ（ビューポート）の内部の高さをピクセル単位で返すプロパティです。これには、水平スクロールバーがある場合でも、そのスクロールバーを除いた、実際にコンテンツが表示される領域の高さが含まれます。

このプロパティは、主にウェブページのレイアウトやデザインを動的に調整する際に利用されます。例えば、ビューポートの高さに基づいて要素のサイズを変更する、またはページの特定の部分が現在のビューポートに収まるかどうかを判断する際などに使用されます。

使用例

console.log(window.innerHeight);

このコードは、現在のブラウザウィンドウのビューポートの内部高さをコンソールに出力します。これは、レスポンシブデザインやユーザーインターフェースの動的な調整に役立ちます。

例えば、全画面でコンテンツを表示したいウェブアプリケーションや、ビューポートのサイズに応じてレイアウトを変更したい場合に、このプロパティが非常に便利です。

注意点

  • `window.innerHeight`はビューポートの高さを返しますが、ページ全体の高さではありません。ページ全体の高さを知りたい場合は、ドキュメントの高さを別途計算する必要があります。

  • モバイルデバイスでは、アドレスバーやブラウザのUI部分の表示状態によって、`window.innerHeight`の値が変動することがあります。この挙動は、デバイスやブラウザによって異なる場合があるため、特にモバイル対応のレスポンシブデザインを行う際には注意が必要です。

（動的なサイトのう。ほーう🫠）

　俺も電子本で、HTML、CSS、JavaScriptの本を出版しておりますッ！　ご興味あれば、よろしくお願いいたしますッ！！

　それでは、最後まで読んでいただき、ありがとうございましたッ！！

よろしくお願いしますッ！