iphone webapp의 배경이 스 와이프에 응답하지 않습니다.

Question

나는 내 웹 사이트의 모바일 버전을 만들고있어 아이폰에서 최대한 원어민 느낌을 얻으려고합니다. 그러나 페이지의 모든 배경 영역은 스 와이프 제스처에 응답하므로 화면에서 중간에 페이지를 이동할 수 있습니다. 특히 사용자가 왼쪽으로 문지르면 왼쪽으로 스 와이프하면 화면의 가장자리에서 내용이 이동하고 페이지 뒤의 회색 배경이 보입니다. 어떻게 예방할 수 있습니까? 나는 페이지 자체를 320x480 스크롤 - 스 와이프를 사용하지 않도록 설정하고 싶습니다 (내가 선택한 목록 요소 제외).

나는 페이지 상단에 다음 메타 태그를 추가 한 :

<meta name="viewport" content="width=320; height=480; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/> 
<meta name="apple-mobile-web-app-capable" content="yes" /> 
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> 

또한하여 touchstart,하는 TouchMove에 대한 이벤트 핸들러로 다음과 본문 요소의 touchend 이벤트를 시도했다 :

function cancelTouchEvent(e) { 
    if (!e) var e = window.event; 
    e.cancelBubble = true; 
    if (e.stopPropagation) e.stopPropagation(); 
    if (e.preventDefault) e.preventDefault(); 
    return false; 
} 

그것은 스 와이프 동작을 중지하지 않지만, 페이지의 모든 링크에 클릭을 방지 않습니다 ...

어떤 도움이 많이 감사합니다. 감사!

Answer 1

나는 똑같은 문제가 있었지만 iPad에서는 문제를 해결할 수있는 사람을 찾을 수 없었지만 일반적인 해결책이 떠 올랐습니다.

이 솔루션은 (자바 스크립트)입니다 - 간단한

document.addEventListener('touchmove', function(e) { 
    if (e.preventDefault) { e.preventDefault(); }}); 

, 아니? 'touchmove'이벤트의 기본 동작을 방지하여 작동하므로 백그라운드를 스 와이프하지 않습니다. 시뮬레이션 된 클릭 이벤트에는 영향을주지 않습니다.