sir 에서 글볼때 이미지 확대가 불편해요 정보
sir 에서 글볼때 이미지 확대가 불편해요
본문
모바일에서 핀치줌으로 이미지 확대후
조금 우측이나 좌측이미지를 보려고 스와이프하면 이미지가 이동하지않고 페이지가 이동해서
다시 축소후 다른지점을 확대해야해요
한가하실때 이미지 확대시 페이지이동 안되게
수정해주시면 감사하겠습니다 ^^
추천
3
3
베스트댓글

저도 그거 때문에 https://sir.kr/js/board_swiper.js 이 파일을 광고차단기로 차단해뒀습니다.
이미지나 페이지 확대, 글자 선택 등 터치와 관련된 액션이 전부 페이지 이동으로 대체돼서 아주 짜증나죠.
이런 문제들 때문에 스트레스 받아서 저 파일 차단 시키니 너무 좋습니다.
댓글 2개

지피티가 알려주네요
모바일에서 핀치 줌(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
)를 분석하는 방법을 고려해야 합니다.
추가 지원이 필요하면 알려주세요!

저도 그거 때문에 https://sir.kr/js/board_swiper.js 이 파일을 광고차단기로 차단해뒀습니다.
이미지나 페이지 확대, 글자 선택 등 터치와 관련된 액션이 전부 페이지 이동으로 대체돼서 아주 짜증나죠.
이런 문제들 때문에 스트레스 받아서 저 파일 차단 시키니 너무 좋습니다.