HTML5 Full Screen Web Apps: нет баров браузера

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

Думаю, я смогу добиться этого, используя Phone Gap. Но мне интересно, может ли его "нормальное" веб-приложение скрыть панель браузера? Я думаю, что это возможно, если я привяжу веб-сайт/приложение к главному экрану?

iPhone имеет http://ajaxian.com/archives/iphone-full-screen-webapps, но как насчет Андриода?

Ответы

Ответ 1

Я знаю, что этот вопрос немного устарел на этом этапе, поэтому вот обновление:

В Safari для iOS 7+ это решение отлично:

<meta name="viewport" content="minimal-ui, width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Атрибут minimum-ui заставляет браузер скрывать все кнопки, сохраняя неповрежденную панель задач.

Я не тестировал это для Android.

Ответ 2

Если вы можете использовать JQuery в своем веб-приложении, я бы предложил вам перейти на NiceScroll.

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

Вот его демо.

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

И эти учебники:

Ответ 3

Вы можете использовать это приложение для Android: Kiosk Web/Html Browser, он создает папку на вашей SD-карте, где вы можете поместить html, показанный в полноэкранном режиме "погружения".

Ответ 4

ИЗМЕНИТЬ

Новый ответ

Многое изменилось с тех пор, как был задан этот вопрос. Теперь есть хорошая поддержка для прокрутки, фиксированной позиции, а панель браузера большинства ОС намного меньше, чем тогда. Поскольку это так, я бы советовал не прибегать к прокручиванию хаков, поскольку большинство сайтов и ответы рекомендуют. Придерживание правил ОС улучшит стабильность, удобство использования и будущую совместимость вашего webapp.

Старый ответ

Это возможно для iPhone, когда кто-то сохраняет его как webapp на рабочем столе. Это работает, если вы добавляете правильные метатеги.

Для стандартного браузера это немного сложнее, вы должны отступить к взлому. В основном адресная строка исчезает при прокрутке (для Iphone и в большинстве случаев для Android). Вы можете подделать это с помощью javascript. На мобильных устройствах также есть хорошая статья: http://mobile.tutsplus.com/tutorials/mobile-web-apps/remove-address-bar/, но это работает только тогда, когда контент больше разрешения экрана.

Ответ 6

<script> function requestFullScreen() {

  var el = document.body;

  // Supports most browsers and their versions.
  var requestMethod = el.requestFullScreen || el.webkitRequestFullScreen 
  || el.mozRequestFullScreen || el.msRequestFullScreen;

  if (requestMethod) {

    // Native full screen.
    requestMethod.call(el);

  } else if (typeof window.ActiveXObject !== "undefined") {

    // Older IE.
    var wscript = new ActiveXObject("WScript.Shell");

    if (wscript !== null) {
      wscript.SendKeys("{F11}");
    }
  }
}


</script>
<a href="#" onClick="requestFullScreen();"> click </a>