JavaScript - 文法 - ビューポートサイズ

1.　概要

2.　ビューポートサイズを取得する

3.　やってみる

4.　参考サイト

1.　概要

　表題の通り、「JavaScript」で、ブラウザのビューポートのサイズを取得します。

2.　ビューポートサイズを取得する

　下記のコードで、ビューポートのサイズを取得できます。


const width  = document.documentElement.clientWidth;
const height = document.documentElement.clientHeight;


　また、ウィンドウのリサイズでのイベントを検知して、その際に、取得するには。


window.addEventListener("resize", () =>
{
	alert("幅["+ window.innerWidth +"] 高さ["+ window.innerHeight +"]");
});


3.　やってみる

　下記のスクリプトと。


function myFunc()
{
	const width  = document.documentElement.clientWidth;
	const height = document.documentElement.clientHeight;
	alert("幅["+ width +"] 高さ["+ height +"]");
}


　下記のコンテンツを記述します。


<form action="">
<input class="page" type="button" value="幅・高さ" onclick='myFunc(")'>
</form>


　それが下記の表示になります。

　　

　上記の「幅・高さ」を押すと、ダイアログが表示されます。
　リサイズも、本ページのソースを見れば、わかるように、仕込んであります。
　ブラウザのウィンドウをリサイズすれば、ダイアログが表示されます。

4.　参考サイト

　本ページは、「ChatGPT」くんを参考にさせていただきました。