Подтвердить что ты не робот

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

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

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

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

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

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

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

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

  • Вернитесь на главный экран и откройте сайт с закладками. URL-адрес и строка состояния не будут удалены.

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

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

Ответ 2

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

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

window.scrollTo(0, 1);

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

Вы можете подождать, пока изображения не будут загружены, а window.onload события, но это не всегда работает, если все кэшировано, событие срабатывает слишком рано, и прокрутка никогда не может прыгать. Вот пример использования 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 - я хочу, чтобы браузер прокручивал естественно, к элементу, чей id является 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.

Ответ 3

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

Ответ 4

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

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

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