sir 에서 글볼때 이미지 확대가 불편해요

수평선1203

프로필 보기 이 회원 글보기 이 회원의 댓글보기

· 1년 전 · 조회 1078 1078 · 댓글 2 2

모바일에서 핀치줌으로 이미지 확대후

조금 우측이나 좌측이미지를 보려고 스와이프하면 이미지가 이동하지않고 페이지가 이동해서

다시 축소후 다른지점을 확대해야해요

한가하실때 이미지 확대시 페이지이동 안되게

수정해주시면 감사하겠습니다 ^^

글쓰기

댓글 2개

수평선1203

프로필 보기 이 회원 글보기 이 회원의 댓글보기

1년 전

지피티가 알려주네요

모바일에서 핀치 줌(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('화면이 기본 상태입니다.');
  }
});

동작 원리

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

주의사항

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

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