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

0
338

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

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

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

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

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

DEMO

高さ

screen.height = 0

screen.availHeight = 0

window.outerHeight = 0

window.innerHeight = 0

document.documentElement.clientHeight = 0

簡単ですが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>

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