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

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

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

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

меню также очень хорошо сделано. Есть ли рамки создавать такие приложения?

26
html5 iphone-standalone-web-app mobile

4 ответов

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

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

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

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

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

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

кроме того, ваш образец на warnerbros.com сайт использует Сенча сенсорный рамках. Ты можешь!--24-- > Google it для получения дополнительной информации или проверьте их демо.

58

Реми Шарп имеет хорошее описание процесса в своей статье "делать это правильно: пропуск строки url iPhone":

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

window.scrollTo(0, 1);

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

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

32

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

1

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

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

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

-2