2012-03-10 2 views
6

Я хочу сделать html5 полноэкранное приложение. Я сделал страницу и добавил ее в качестве значка на свой iphone. Я добавил метатег:Как отключить подпрыгивание в html5 полноэкранном приложении iphone?

<meta name="apple-mobile-web-app-capable" content="yes"> 
<meta name="apple-mobile-web-app-status-bar-style" content="black"> 
<meta name="viewport" content="width=device-width, user-scalable=no" /> 

То, что я хотел достичь, это: черная строка состояния сверху (это не работает, и я не знаю, почему это до сих пор по умолчанию в строке состояния ... кто-либо идеи.?) Без возможности для увеличения (например, в приложении facebook) - это отлично работает.

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

EDIT: status bar теперь черный. Через какое-то время он изменился. Была ли предыдущая версия кэширована на iphone или что?

+0

http://www.hakoniemi.net/labs/scrollingOffset/nonbounce.html –

ответ

15

Это предотвратит скроллинг на всей странице

document.ontouchmove = function(e) {e.preventDefault()}; 

В вашем случае, когда вы хотите некоторые дивы быть прокручивать, а некоторые не, вы должны быть в состоянии поймать событие, прежде чем он попадает в документ

scrollableDiv.ontouchmove = function(e) {e.stopPropagation()}; 
+1

Является ли это решение работает для вас? Это действительно остановило подпрыгивание при запуске из сафари, когда на отдельной веб-странице (через ссылку «добавить на главную страницу») страница продолжает прыгать ... – liorda

+1

Хорошая попытка, работает для большей части. За исключением случаев, когда элемент с включенной прокруткой прокручивается вверх или вниз. Тогда эффект отскока все еще срабатывает. – mrt

+0

В то время как это работает, я столкнулся с проблемами, в которых это, по-видимому, вызывает проблемы с нажатием/кликом, например кнопки, иногда с ошибкой (предположительно, если было какое-либо движение контакта при запуске щелчка). На данный момент для меня это не значит, что нельзя вызвать preventDefault, если e.target является кнопкой, ссылкой или элементом ввода. –

1

Если вы используете Кордову 1.7+, откройте Cordova.plist файл и установить ключ UIWebViewBounce в NO

+0

Будьте осторожны при публикации копий и вставных шаблонов/дословных ответов на несколько вопросов, они, как правило, помечены сообществом сообществом. Если вы это делаете, это обычно означает, что вопросы дублируются, поэтому вместо них следует указывать их как таковые: http://stackoverflow.com/a/12394389/419 – Kev

+0

Хорошо, простите об этом. –

0

Расширение подхода dmanxii здесь является то, что мы делаем.

$("body").on("touchmove", function (event) { 
     if ($(event.target).is(".WhatEverClass") || $(event.target).parentsUntil().is(".ParentClass")) { 
      //console.log("NOT Disabled"); 
     } 
     else { 
      //console.log("Disabled"); 
      event.preventDefault(); 
     } 
    });