Как полностью скрыть панель навигации в iPhone / HTML5 - PullRequest
26 голосов
/ 16 мая 2011

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

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

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

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

Ответы [ 4 ]

59 голосов
/ 22 июня 2011

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

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

    <meta name="apple-mobile-web-app-capable" content="yes" />
    
  2. Откройте свой сайт с Safari на iPhone и используйте функцию закладок, чтобы добавить свой сайт на главный экран.

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

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

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

33 голосов
/ 16 мая 2011

У Реми Шарпа есть хорошее описание процесса в его статье «Делать все правильно: пропуск строки 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 - я хочу, чтобы браузер естественным образом прокручивал до элемента с идентификатором 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.

1 голос
/ 27 февраля 2013

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

0 голосов
/ 26 июня 2014

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

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

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

...