Вопрос по html5, mobile – Полноэкранные веб-приложения на HTML5: без панелей браузера

12

Я создаю веб-приложение HTML5 для мобильных устройств, и мне было предложено скрыть браузерnav bar (the back & forward buttons) (опечатка здесь пред.). Как я могу этого достичь?

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

iPhone имеетhttp://ajaxian.com/archives/iphone-full-screen-webappsа как быть с андриодом хотя бы?

Можете ли вы применить JQuery в своем приложении? Asif
Существует аналогичный, более свежий ответ на этот вопрос, найденный наstackoverflow.com/questions/24889100/… Guentersniden

Ваш Ответ

6   ответов
11

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

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

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

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

Я не проверял это для Android.

Это решение больше не работает в iOS 8+.stackoverflow.com/questions/24889100/…
7

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

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

Вотего демо.

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

И эти уроки:

Опс, мой плохой, я имею в виду панель браузера. Тот, что со спиной & amp; кнопки вперед Jiew Meng
Вы принимаете о виде & quot;Automatic F11 Script& Quot ;?
@JiewMeng Может бытьthis tutorial поможет вам..
О, я только что узнал, что это означает, что автоматически делает браузер полноэкранным ... хм, не совсем так. Я думаю, что у iPhone есть полноэкранное веб-приложениеajaxian.com/archives/iphone-full-screen-webapps, а как же Андриод Jiew Meng
0
<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>
0

EDIT

New answer

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

Old answer

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

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

1

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

0

В последней бета-версии Chrome для Android есть такая функция: https://developers.google.com/chrome/mobile/docs/installtohomescreen

Похожие вопросы