0

I'm trying to make a website app work on Android tablet (4.2) and I want it to use Chrome as a platform for a full screen display as default Android webview is really horrible. So I figured out I have to include 

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

to make a website available for a full-screen display in Chrome by tapping "Add to HomeScreen" there. But when I open this full screen version of a website, there is still a small thin grey bar on top showing index.html location path. It's not address bar or navigation bar, it's just something else that is really not supposed to be there in full screen mode. Does anyone know what is that bar and how to get rid of it?

Nebular Dust
  • 403
  • 1
  • 6
  • 17

1 Answers1

1

I've just tested it on this page and it works for me although you will get this bar when there is a navigation away from the same origin as what was added to the homescreen. For example clicking on navigate away in the demo will add the grey bar.

grey bar

tip: Adding on http and redirecting to https will be considered a new origin. Also navigating to any other domain will.

As a side note I would suggest, now (Dec 2015) the recommended solution is to use the web app manifest. The Web App manifest describes what the browser should launch and how it should launch it from the homescreen. You will need to create a manifest file (see below) and link to it from your pages with in the head of your html page.

Example (launches the index page fullscreen):

{
  "short_name": "Kinlan's Amaze App",
  "name": "Kinlan's Amazing Application ++",
  "icons": [
    {
      "src": "launcher-icon-2x.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "launcher-icon-3x.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "launcher-icon-4x.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "start_url": "/index.html",
  "display": "standalone",
  "orientation": "landscape"
}
Kinlan
  • 16,315
  • 5
  • 56
  • 88
  • Yes, I have that manifest.json file as well with some options, it doesn't change much. Also what you show on your screenshot is exactly what I get in full screen mode. But I can't switch to https:// as I store my app on a local storage and it will always be file:/// Maybe there is any way to do it with file:/// as well? – Nebular Dust Dec 01 '15 at 21:15
  • No, there won't be a way to do it with file:// that is considered unsecure so the banner will always be visible. – Kinlan Dec 01 '15 at 21:25