JavaScript | ブラウザのズーム倍率をパーセント値で取得する方法

JavaScript 取得,JavaScript

JavaScript | ブラウザのズーム倍率をパーセント値で取得する方法

JavaScriptでユーザーがブラウザの機能でズーム処理をした際にそのズーム値(ズームレベル)をパーセントの倍率で取得する方法を紹介しています。

一定の値以下または一定の値以上はズームさせたくない場合や、ズーム処理を取得したズーム値に合わせて別途実装する場合などに使えます。

スマートフォンのズーム操作にも別の処理で拒否していない限り対応しています。

ブラウザのズーム倍率で取得する

ブラウザのズーム倍率で取得する動作サンプルとそのJavaScriptコードになります。

このページを「Ctrl + マウスホイール」などで表示サイズを変更すれば、値が更新されます。
スマートフォンの場合も未確認ですが動いていると、思っています。

See the Pen JavaScript Canvas 2d animation by yochans (@yochans) on CodePen.

サンプルでは取得したズーム値をpタグに出力しています。
コンソールログでも出力しています。

<p id="output">100%</p>

サンプルの発火イベントはaddEventListenerのresizeを利用してみました。
より正確にブラウザのズームイン、ズームアウト時のみで取得する場合はaddEventListenerのwheelを使って同時にCtrlが押されているかどうかを判別して実装可能です。

window.devicePixelRatioとwindow.screenの情報を得て、現在のズーム率を計算しています。

JavaScript特有のというか、いつもの小数点以下が発生する可能性があるため、Math.floor()で切り捨てています。

window.addEventListener(`resize`, () => {
	let zoom_level = window.devicePixelRatio || window.screen.availWidth / document.documentElement.clientWidth * 100;
	zoom_level = Math.floor(zoom_level);

	console.log(zoom_level);
	document.querySelector('#output').innerHTML = zoom_level + '%';
})

以下の情報を参考にしました。

参考:Window.devicePixelRatio – Web API | MDN

参考:Catch browser’s “zoom" event in JavaScript – Stack Overflow