JavaScript에서 브라우저 확대/축소 변경을 어떻게 감지할 수 있나요?

JavaScript에서 브라우저 확대/축소 이벤트 감지

JavaScript에는 브라우저 확대/축소 변경을 감지하는 직접적인 방법이 없기 때문에 이러한 이벤트에 대응하기가 어렵습니다. 그러나 간접적인 기술을 활용하는 해결 방법이 있습니다.

한 가지 접근 방식은 확대/축소 중에 백분율 기반 값의 동작을 이용하는 것입니다. 백분율 값은 확대/축소 수준에 관계없이 일관되게 유지되므로 백분율과 픽셀로 정의된 요소의 위치를 ​​비교할 수 있습니다. 위치가 갈라지면 확대/축소 변경을 나타냅니다. 이 기술은 다음 코드에 설명된 대로 구현할 수 있습니다.

// 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
    }
});

또는 응답에서 참조된 스택 오버플로 게시물에 설명된 방법을 사용할 수 있습니다.

• 페이지 확대 감지 기술: https://web.archive.org/web/20080723161031/http://novemberborn.net/javascript/page-zoom-ff3

이러한 기술은 전체에 걸쳐 다양한 신뢰성을 가질 수 있다는 점에 유의하는 것이 중요합니다. 다른 브라우저. 또한 페이지가 로드되기 전에 발생한 확대/축소 변경은 감지할 수 없습니다.

위 내용은 JavaScript에서 브라우저 확대/축소 변경을 어떻게 감지할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!