지피티가 알려주네요

모바일에서 핀치 줌(Pinch Zoom)으로 화면이 확대되었는지를 판별하려면 window.visualViewport API를 활용할 수 있습니다. 이 API를 사용하면 현재 화면의 실제 크기와 배율 정보를 얻을 수 있습니다.

다음은 이를 활용한 간단한 코드 예제입니다:

function isZoomedIn() {
  const viewport = window.visualViewport;
  
  if (viewport) {
    // 화면 확대 비율 판별
    const zoomFactor = viewport.scale;
    return zoomFactor > 1; // 확대되었으면 true 반환
  }
  return false; // API 지원 안되면 기본값 false
}

// 이벤트 리스너로 화면 변경 시 확인
window.visualViewport?.addEventListener('resize', () => {
  if (isZoomedIn()) {
    console.log('핀치 줌으로 화면이 확대되었습니다.');
  } else {
    console.log('화면이 기본 상태입니다.');
  }
});

동작 원리

1. window.visualViewport.scale: 현재 화면 배율 정보를 제공하며, 기본값은 1입니다. 핀치 줌으로 확대되면 1보다 큰 값이 됩니다.
2. resize 이벤트: 핀치 줌으로 인해 뷰포트 크기가 변경되었을 때 감지 가능합니다.

주의사항

1. 브라우저 지원: visualViewport는 최신 브라우저에서만 지원됩니다. (Chrome, Edge, Safari 등)
2. 대안: 지원하지 않는 환경에서는 CSS의 window.innerWidth와 document.documentElement.clientWidth를 비교하거나, 터치 이벤트(touchstart, touchmove)를 분석하는 방법을 고려해야 합니다.

추가 지원이 필요하면 알려주세요!

저도 그거 때문에 https://sir.kr/js/board_swiper.js 이 파일을 광고차단기로 차단해뒀습니다.

이미지나 페이지 확대, 글자 선택 등 터치와 관련된 액션이 전부 페이지 이동으로 대체돼서 아주 짜증나죠.

이런 문제들 때문에 스트레스 받아서 저 파일 차단 시키니 너무 좋습니다.