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