【javascript】window.innerHeightってどこの高さ？

コーディングする時、特にレスポンシブサイトなどでは、
何かと動的に高さを調整したくなる時があるかと思います。

毎回「どのプロパティ使えば、どこの高さが取得できるんだっけ？」と
混乱していたのでまとめてみました。

• screen.height = スクリーンの高さ（ディスプレイ全体）
• screen.availHeight = スクリーンの有効領域の高さ
• window.outerHeight = ブラウザ全体の高さ
• window.innerHeight = ブラウザの内側の高さ（ページが表示される高さ）
• document.documentElement.clientHeight = ページが表示される高さ

下のリンクボタンをクリックで
実際に取得した値を表示します。

特にスマホでは、アドレスバーの表示/非表示で
値が変わってくるので色々試してみてください。

簡単ですがscriptはこちら

<script>
	const height = document.getElementById('getHeight');
	height.addEventListener('click', function(){
		const screenHeight = screen.height;
		const screenAvailHeight = screen.availHeight;
		const windowOuterHeight = window.outerHeight;
		const windowInnerHeight = window.innerHeight;
		const docClientHeight = document.documentElement.clientHeight;
		document.getElementById('01').innerHTML = screenHeight;
		document.getElementById('02').innerHTML = screenAvailHeight;
		document.getElementById('03').innerHTML = windowOuterHeight;
		document.getElementById('04').innerHTML = windowInnerHeight;
		document.getElementById('05').innerHTML = docClientHeight;
	});
</script>

他にも色々取得方法ありそうなので、試してみたいです。