остановить фон веб-приложение для iPhone от ответа на пролистывания - PullRequest
Новая
       8

остановить фон веб-приложение для iPhone от ответа на пролистывания

1 голос
/ 27 июня 2009

Я делаю мобильную версию своего веб-сайта и пытаюсь сделать так, чтобы это было как можно более нативно на iphone. Однако любые фоновые области страницы реагируют на жесты, так что вы можете частично сдвинуть страницу за пределы экрана. В частности, если пользователь, например, коснется и проведет пальцем влево, контент сместится за край экрана, и за страницей будет виден серый фон. Как это можно предотвратить? Я бы хотел, чтобы сама страница была размером 320х480 с отключенной прокруткой (за исключением выбранных элементов списка).

В верхнюю часть страницы я добавил следующие метатеги: 

<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 элемента body: 

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

Это не останавливает поведение смахивания, но предотвращает клики по всем ссылкам на странице ...

Любая помощь очень ценится. Спасибо!

1 Ответ

4 голосов
/ 26 мая 2010

У меня была такая же проблема, но на iPad, и я не смог найти никого, кто смог бы решить проблему в общем случае, но я думаю, что нашел решение, которое работает.

Решение (в Javascript) - 

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

Просто, нет? Он работает, предотвращая поведение по умолчанию для событий «touchmove», поэтому не происходит смахивание фона. Это не влияет на смоделированные события клика.

...