Question

我正在为移动设备创建一个HTML5网络应用程序，并被要求隐藏浏览器导航栏（后退和前进按钮）（错误在这里打印）。我怎样才能做到这一点？

我认为我应该能够使用手机差距实现这一目标。但是我想知道它是否可以用于正常的＆＃34;网络应用程序隐藏浏览器栏？如果我将网站/应用程序固定到主屏幕，我认为可能吗？

iPhone有http://ajaxian.com/archives/iphone-full-screen-webapps，但至少Andriod呢？

Answer 1

我知道这个问题在这一点上已经过时了，所以这是一个更新：

在适用于iOS 7+的Safari上，此解决方案非常棒：

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

minimal-ui属性使浏览器隐藏所有按钮，同时保持任务栏不变。

我没有为Android测试过这个。

Answer 2

如果您可以在网络应用中使用JQuery而不是建议您使用NiceScroll插件。

它可以用于移动和桌面浏览器，并隐藏浏览器的滚动条。如果您的代码超出了浏览器的视口高度，那么它将生成一个自定义滚动条，如果不使用它将会淡出。

这是its Demo。

修改
根据您的更新，我想补充一点，我实际上不是一个原生的移动网络应用程序开发人员，但在搜索您的问题时，我发现了一些可以帮助您进一步引导的SO问题：

Removing address bar from browser (to view on Android)

Fullscreen Web App for Android

这些教程：

Full Screen Web Apps

Best Practices for Web Apps

Answer 3

您可以将此应用程序用于Android：Kiosk Web/Html Browser，它会在您的SD卡中创建一个文件夹，您可以在其中放置html，以全屏“沉浸式模式”显示。

Answer 4

修改

新答案

自问这个问题以来，情况发生了很大变化。现在有很好的原生支持滚动，固定位置，大多数操作系统的浏览器栏比当时要小很多。由于这种情况，我建议不要采用滚动黑客，因为大多数网站和答案都是推荐的。坚持操作系统的规则将提高您的webapp的稳定性，可用性和未来的兼容性。

旧答案

当有人将其作为网络应用程序保存到主屏幕时，可以使用iPhone。如果添加正确的元标记，则此方法有效。

对于标准浏览器模式，你必须回退到黑客攻击。滚动时基本上地址栏会消失（对于Iphone和大部分时间用于android）。你可以用javascript伪造这个。移动设备上也有一篇很好的文章： http://mobile.tutsplus.com/tutorials/mobile-web-apps/remove-address-bar/，但仅当内容的屏幕分辨率较长时才有效。

Answer 5

最新的Chrome for Android测试版中有这样的功能： https://developers.google.com/chrome/mobile/docs/installtohomescreen

Answer 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>

HTML5全屏Web应用程序：没有浏览器栏

6 个答案: