Как полностью скрыть панель навигации в iPhone / HTML5

Question

Я действительно плохо знаком с HTML5 для мобильных устройств. Я использую jQuery Mobile для моего текущего приложения, и у меня есть некоторые проблемы, скрывающие панель навигации.

Я нашел этот сайт: http://m.somethingborrowedmovie.warnerbros.com/. (Я не вставляю эту ссылку для продвижения фильма.)

Я был просто поражен этим сайтом HTML5. Кто-нибудь имеет представление о методе, используемом, чтобы скрыть панель навигации?

Меню также действительно хорошо сделано. Есть ли рамки для создания приложений, подобных этому?

Answer 1

Попробуйте следующее:

1. Добавь это meta тег в head вашего HTML-файла:

   <meta name="apple-mobile-web-app-capable" content="yes" />
   

2. Откройте свой сайт с Safari на iPhone и используйте функцию закладок, чтобы добавить свой сайт на главный экран.

3. Вернитесь на начальный экран и откройте сайт с закладками. URL и строка состояния исчезнут.

Пока вам нужно работать только с iPhone, у вас должно быть все в порядке с этим решением.

Кроме того, ваш пример на сайте warnerbros.com использует сенсорную среду Sencha. Вы можете Google это для получения дополнительной информации или проверить их демонстрации.

Answer 2

У Реми Шарпа есть хорошее описание процесса в его статье "Делаем все правильно: пропускаем строку с URL-адресом iPhone":

Сделать iPhone скрывающим строку URL довольно просто, вам нужно запустить следующий JavaScript:

window.scrollTo(0, 1); 

Однако есть вопрос, когда? Вы должны сделать это, как только высота будет правильной, чтобы iPhone мог прокрутить до первого пикселя документа, в противном случае он попытается, а затем высота загрузится, заставив строку URL вернуться к просмотру.

Вы можете подождать, пока изображения загрузятся, и не сработает событие window.onload, но это не всегда работает, если все кешируется, событие срабатывает слишком рано и scrollTo никогда не имеет возможности перейти. Вот пример использования window.onload: http://jsbin.com/edifu4/4/

Я лично использую таймер на 1 секунду - этого времени достаточно на мобильном устройстве, пока вы ждете рендеринга, но достаточно долго, чтобы оно не срабатывало слишком рано:

setTimeout(function () {   window.scrollTo(0, 1); }, 1000);

Тем не менее, вы хотите, чтобы это настраивалось, только если это браузер для iPhone (или только для мобильных устройств), так что подлый нюх (я обычно не поощряю это, но мне это удобно, чтобы не допустить "нормальных" браузеров настольных компьютеров от перехода на один пиксель)):

/mobile/i.test(navigator.userAgent) && setTimeout(function
() {   window.scrollTo(0, 1); }, 1000); 

Самая последняя часть этого, и эта часть, по-видимому, отсутствует в некоторых примерах, которые я видел в Интернете, такова: если пользователь специально ссылается на фрагмент URL, то есть URL-адрес содержит хеш, вы не хочу прыгать Поэтому, если я перейду на http://full-frontal.org/tickets - я хочу, чтобы браузер естественным образом прокручивал до элемента с идентификатором dayconf и не переходил наверх с помощью scrollTo(0, 1):

/mobile/i.test(navigator.userAgent) && !location.hash &&
setTimeout(function () {   window.scrollTo(0, 1); }, 1000);​

Попробуйте это на iPhone (или на симуляторе) http://jsbin.com/edifu4/10 и вы увидите, что он будет прокручиваться, только когда вы попали на страницу без фрагмента URL.

Answer 3

Проблема со всеми ответами, приведенными до сих пор, состоит в том, что на чем-то заимствованном сайте панель Mac остается полностью скрытой при прокрутке, если вы просто используете решение scrollTo, а затем пользователь прокручивает вверх, панель навигации снова открывается, она Похоже, что весь сайт внутри div с прокруткой включен, так что вместо прокрутки страницы он прокручивает только внутри div и KEEPS навигационная панель скрыта. Единственный способ раскрыть панель навигации - прикоснуться к верхней части экрана.

Answer 4

Простая навигация по документу javascript на "#" сделает это.

window.onload = function()
{
document.location.href = "#";
}

Это заставит панель навигации удалить себя при загрузке.