모든 확대 / 축소 기능을 비활성화하지 않고 브라우저 (터치 장치에서)의 지정된 요소 에 대해 두 번 탭 확대 / 축소 기능 을 비활성화 하고 싶습니다 .
예 : 어떤 일이 일어나기 위해 하나의 요소를 여러 번 탭할 수 있습니다. 이것은 데스크톱 브라우저 (예상대로)에서는 잘 작동하지만 터치 장치 브라우저에서는 확대됩니다.
답변
참고 (2020 년 8 월 4 일 기준) :이 솔루션은 iOS Safari v12 +에서 작동하지 않는 것 같습니다. iOS Safari를 다루는 명확한 솔루션을 찾으면이 답변을 업데이트하고이 메모를 삭제하겠습니다.
CSS 전용 솔루션
touch-action: manipulation다음 disable-dbl-tap-zoom클래스 와 같이 두 번 탭 확대 / 축소를 비활성화하려는 요소에 추가하십시오 .
.disable-dbl-tap-zoom {
touch-action: manipulation;
}
로부터 touch-action문서 (강조 광산) :
시장 조작
이동 및 핀치 확대 / 축소 동작을 활성화하지만 두 번 탭하여 확대 / 축소 와 같은 추가 비표준 동작은 비활성화 합니다.
이 값은 Android 및 iOS에서 작동합니다.
답변
<head>
<title>Site</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
etc...
</head>
나는 최근에 그것을 사용했으며 iPad에서 잘 작동합니다. Android 또는 기타 장치에서 테스트하지 않았습니다 (웹 사이트가 iPad에만 표시되기 때문).
답변
이것이 오래되었을 수 있다는 것을 알고 있지만 완벽하게 작동하는 솔루션을 찾았습니다. 미친 메타 태그가 필요없고 콘텐츠 확대 / 축소를 중지 할 필요가 없습니다.
교차 기기인지 100 % 확실하지 않습니다.,하지만 내가 원하는대로 정확히 작동했습니다.
$('.no-zoom').bind('touchend', function(e) {
e.preventDefault();
// Add your code here.
$(this).click();
// This line still calls the standard click event, in case the user needs to interact with the element that is being clicked on, but still avoids zooming in cases of double clicking.
})
이렇게하면 일반 탭 기능이 비활성화되고 표준 클릭 이벤트가 다시 호출됩니다. 이렇게하면 모바일 장치가 확대 / 축소되는 것을 방지 할 수 있지만 그렇지 않으면 정상적으로 작동합니다.
편집 : 이것은 이제 몇 개의 라이브 앱에서 시간 테스트를 거쳐 실행되었습니다. 100 % 크로스 브라우저 및 플랫폼 인 것 같습니다. 위의 코드는 클릭 이벤트 전에 사용자 지정 동작을 원하지 않는 한 대부분의 경우 복사-붙여 넣기 솔루션으로 작동 합니다.
답변
일부 사람들은 답변 아래의 댓글을 읽지 않기 때문에 내 질문에 올바르게 대답하고 싶었습니다. 그래서 여기 있습니다 :
(function($) {
$.fn.nodoubletapzoom = function() {
$(this).bind('touchstart', function preventZoom(e) {
var t2 = e.timeStamp
, t1 = $(this).data('lastTouch') || t2
, dt = t2 - t1
, fingers = e.originalEvent.touches.length;
$(this).data('lastTouch', t2);
if (!dt || dt > 500 || fingers > 1) return; // not double-tap
e.preventDefault(); // double tap - prevent the zoom
// also synthesize click events we just swallowed up
$(this).trigger('click').trigger('click');
});
};
})(jQuery);
나는 이것을 쓰지 않고 단지 수정했습니다. 여기에서 iOS 전용 버전을 찾았습니다 : https://gist.github.com/2047491 (Kablam에게 감사드립니다)
답변
두 번 탭 확대 / 축소를 전역 적으로 비활성화하는 CSS (모든 요소) :
* {
touch-action: manipulation;
}시장 조작
패닝 및 핀치 확대 / 축소 제스처를 활성화하지만 두 번 탭하여 확대 / 축소하는 것과 같은 추가 비표준 제스처는 비활성화합니다.
감사합니다 Ross, 내 대답은 그의 확장입니다 : https://stackoverflow.com/a/53236027/9986657
답변
jQuery없이 작동 하는 버전이 필요한 경우 바닐라 JavaScript를 사용 하도록 Wouter Konecny의 답변 ( Johan Sundström 이 요점 을 수정하여 생성됨)을 수정 했습니다 .
function preventZoom(e) {
var t2 = e.timeStamp;
var t1 = e.currentTarget.dataset.lastTouch || t2;
var dt = t2 - t1;
var fingers = e.touches.length;
e.currentTarget.dataset.lastTouch = t2;
if (!dt || dt > 500 || fingers > 1) return; // not double-tap
e.preventDefault();
e.target.click();
}그런 다음 touchstart이 함수를 호출 하는 이벤트 핸들러를 추가합니다 .
myButton.addEventListener('touchstart', preventZoom); 답변
이 다른 답변 https://stackoverflow.com/a/42288386/1128216에 설명 된대로 css 속성 touch-action을 none로 설정해야합니다.
.disable-doubletap-to-zoom {
touch-action: none;
}