JavaScript でブラウザのズーム変更を検出するにはどうすればよいですか?

JavaScript でのブラウザー ズーム イベントの検出

JavaScript にはブラウザー ズームの変化を検出する直接的な方法がないため、このようなイベントに応答することが困難になります。ただし、間接的な手法を利用した回避策はあります。

1 つのアプローチには、ズーム中のパーセンテージベースの値の動作を利用することが含まれます。パーセンテージ値はズーム レベルに関係なく一貫しているため、パーセンテージとピクセルで定義された要素の位置を比較できます。位置が異なる場合は、ズームの変更を示します。この手法は、次のコードで示されているように実装できます:

// Define elements with percentage and pixel positions
const percentageElement = document.getElementById("percentage");
const pixelElement = document.getElementById("pixel");

// Calculate their position ratio
const initRatio = percentageElement.offsetWidth / pixelElement.offsetWidth;

// Event Listener for window resize (includes zoom)
window.addEventListener("resize", (event) => {
    // Calculate the new ratio
    const newRatio = percentageElement.offsetWidth / pixelElement.offsetWidth;

    // Check for zoom change if ratio has changed
    if (newRatio !== initRatio) {
        // Perform desired actions upon zoom change
    }
});

あるいは、応答で参照されている Stack Overflow の投稿で説明されているメソッドを使用することもできます:

• ページズーム検出テクニック: https://web.archive.org/web/20080723161031/http://novemberborn.net/javascript/page-zoom-ff3

これらの手法の信頼性は国によって異なる可能性があることに注意することが重要です。異なるブラウザ。さらに、ページが読み込まれる前に発生したズームの変更を検出することはできません。

以上がJavaScript でブラウザのズーム変更を検出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。