Html HTML5 全屏 Web 应用程序：没有浏览器栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11280826/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 Full Screen Web Apps: No browser bars
提问by Jiew Meng
I am creating a HTML5 web app for mobile devices and was asked to hide the browser nav bar (the back & forward buttons)(typo here prev.). How can I achieve that?
我正在为移动设备创建一个 HTML5 Web 应用程序，并被要求隐藏浏览器导航栏（后退和前进按钮）（此处有错别字）。我怎样才能做到这一点？
I think I should be able to achieve that using Phone Gap. But I wonder if its possible for a "normal" web app to hide the browser bar? I think its possible if I pin the web site/app to the home screen?
我想我应该能够使用 Phone Gap 来实现这一点。但我想知道“普通”网络应用程序是否有可能隐藏浏览器栏？我认为如果我将网站/应用程序固定到主屏幕上有可能吗？
iPhone has http://ajaxian.com/archives/iphone-full-screen-webapps, but what about Andriod at least?
iPhone 有http://ajaxian.com/archives/iphone-full-screen-webapps，但至少 Andriod 怎么样？
采纳答案by Sheldonbrax
I know this question is a bit out of date at this point so here is an update:
我知道这个问题在这一点上有点过时，所以这里有一个更新：
On Safari for iOS 7+ this solution is great:
在 iOS 7+ 的 Safari 上，这个解决方案很棒：
<meta name="viewport" content="minimal-ui, width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
The minimal-ui attribute makes the browser hide all the buttons while keeping the taskbar intact.
minimum-ui 属性使浏览器隐藏所有按钮，同时保持任务栏完整。
I have not tested this for android.
我还没有为 android 测试过这个。
回答by Asif
If you can use JQueryin your web-app than I would suggest you to go for NiceScrollplugin.
如果您可以在您的网络应用程序中使用JQuery，那么我建议您使用NiceScroll插件。
It can be used for both mobile and desktop browsers and will hide the browser's scrollbars. If your code is going beyond the viewport height of browser than it will make a custom scrollbar which will fadeout if not in use.
它可用于移动和桌面浏览器，并将隐藏浏览器的滚动条。如果你的代码超出了浏览器的视口高度，那么它会创建一个自定义滚动条，如果不使用它就会淡出。
Here is its Demo.
这是它的 Demo。
Edit:
As per your update, I would like to add that I am actually not a native mobile web-app developer but while searching for your problems I found some SO questions that can help you to lead the way further:
编辑：
根据您的更新，我想补充一点，我实际上不是本地移动网络应用程序开发人员，但是在搜索您的问题时，我发现了一些可以帮助您进一步引导的问题：
And these tutorials:
还有这些教程：
回答by fabiodipa
You could use this application for Android: Kiosk Web/Html Browser, it creates a folder in your sd card where you can put the html, showed in fullscreen "immersive mode".
您可以将此应用程序用于 Android：Kiosk Web/Html Browser，它会在您的 sd 卡中创建一个文件夹，您可以在其中放置 html，以全屏“沉浸模式”显示。
回答by Cícero Alexandre Alves Lima
<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>
回答by Tosh
EDIT
编辑
New answer
新答案
Much has change since this question was asked. There now is good native support for scrolling, fixed position, and the browser bar of most OS is a lot smaller then back then. Since this is the case I would advice not to resort to scrolling hacks as most sites and answers recommend. Sticking to the rules of the OS will improve the stability, usability and future compatibility of your webapp.
自从提出这个问题以来，已经发生了很大变化。现在对滚动、固定位置有很好的原生支持，而且大多数操作系统的浏览器栏比当时小了很多。既然是这种情况，我建议不要像大多数网站和答案推荐的那样使用滚动技巧。坚持操作系统的规则将提高您的 web 应用程序的稳定性、可用性和未来兼容性。
Old answer
旧答案
It's possible for iPhone when somebody saves it as a webapp to the homescreen. This works if you add the proper meta tags.
当有人将它作为 web 应用程序保存到主屏幕时，iPhone 是可能的。如果您添加适当的元标记，这将起作用。
For the standard browsermode it's a bit trickier you have to fallback to hacks. Basically the address bar disappears when you scroll (for Iphone and most of the times for android). You can fake this with javascript. Mobile tuts also has a good article on it: http://mobile.tutsplus.com/tutorials/mobile-web-apps/remove-address-bar/, but this only works when content is longer the screen resolution.
对于标准浏览器模式，您必须回退到黑客攻击有点棘手。基本上，当您滚动时地址栏会消失（对于 Iphone 和大部分时间对于 android）。你可以用javascript伪造这个。Mobile tuts 也有一篇很好的文章：http://mobile.tutsplus.com/tutorials/mobile-web-apps/remove-address-bar/，但这仅适用于内容超过 屏幕分辨率的情况。
回答by Denes Papp
There's such function in the latest Chrome for Android beta: https://developers.google.com/chrome/mobile/docs/installtohomescreen
最新的 Chrome for Android beta 中有这样的功能：https: //developers.google.com/chrome/mobile/docs/installtohomescreen
