stop background of iphone webapp from responding to swipes
- by JoeS
I'm making a mobile version of my website, and trying to make it feel as native as possible on the iphone. However, any background areas of the page respond to swiping gestures such that you can shift the page partway off the screen. Specifically, if the user touches and swipes left, for example, the content shifts off the edge of the screen and one can see a gray background 'behind' the page. How can this be prevented? I'd like to have the page itself be 320x480 with scroll-swiping disabled (except on list elements that I choose).
I have added the following meta tags to the top of the page:
<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" />
I've also tried the following as the event handler for the touchstart, touchmove, and touchend events of the body element:
function cancelTouchEvent(e) {
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
if (e.preventDefault) e.preventDefault();
return false;
}
It doesn't stop the swiping behavior, but does prevent clicks on all links on the page...
Any help is much appreciated. Thanks!
