移动端web隐藏工具栏

移动端web隐藏工具栏

With both iOS and Android-driven devices using WebKit as their browser's rendering engine, web developers have many advantages:

通过将iOS和Android驱动的设备都使用WebKit作为浏览器的呈现引擎，Web开发人员具有许多优势：

A rendering engine with capable of flawless CSS animations

具有完美CSS动画功能的渲染引擎

A rendering engine that's fast...very fast

快速的渲染引擎... 非常快

A rendering engine that's modern and forward-thinking

具有现代感和前瞻性的渲染引擎

These advantages allow us to create web apps within that browser that look as good as native applications.  If your goal is to create web apps that look like native applications, the details count.  One of those details:  hiding the address bar.  Native applications don't have address bars so why should your app? As an added bonus, hiding the address bar will provide you an extra 60 pixels of space!

这些优势使我们能够在浏览器中创建外观与本地应用程序一样好的Web应用程序。 如果您的目标是创建看起来像本机应用程序的Web应用程序，那么详细信息就很重要。 这些细节之一：隐藏地址栏。 本机应用程序没有地址栏，那么为什么要使用您的应用程序？ 另外，隐藏地址栏将为您提供额外的60像素空间！

You may think hiding the address bar within the mobile browser is difficult but you'd be surprised how simple it is.  All you need is a touch of JavaScript!

您可能会认为很难在移动浏览器中隐藏地址栏，但您会惊讶地发现它是如此简单。 您只需要一点JavaScript！

JavaScript (The JavaScript)

// When ready... window.addEventListener("load",function() { // Set a timeout... setTimeout(function(){ // Hide the address bar! window.scrollTo(0, 1); }, 0); });

The window.scrollTo method is the key to hiding the address bar.  The wrapping setTimeout function is required by the iPhone to properly hide the address bar -- not using setTimeout will cause problems.

window.scrollTo方法是隐藏地址栏的关键。 iPhone需要包装的setTimeout函数才能正确隐藏地址栏-不使用setTimeout会引起问题。

奖励：书签站点的META标签 (Bonus: META Tag for Bookmarked Sites)

If a user has added your web application to their springboard, the following meta tag can remove the top bar from the browser:

如果用户已将您的Web应用程序添加到其跳板，则以下meta标签可以从浏览器中删除顶部栏：

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

And that's all!  The address bar is hidden until the user swipes down near the top bar of the application.  With the address bar hidden, your web app can look just like a native app!

就这样！ 地址栏将一直隐藏，直到用户在应用程序顶部栏附近向下滑动为止。 隐藏地址栏后，您的Web应用程序看起来就像是本机应用程序！

翻译自: https://davidwalsh.name/hide-address-bar

移动端web隐藏工具栏

相关资源：android WebView加载H5去地址栏的两种方式