51

I recently developed a website that fetches mixed http/https content. Due to this, I always get the address bar displayed on top (It doesn't auto-hide like in other websites). Here's what I'm talking about:

The Website

This is the link to the website.

The content is fetched from various sources, hence filtering non-https content is not possible. And since the website is meant for reading, a non-full-screen display is painful for the reader. So, is there a way to force the auto-hide behavior?

PS: The website uses Twitter Bootstrap, if it helps.
PPS: I don't want to use the full-screen API, it'll be too heavy for this.

Ranveer
  • 6,683
  • 8
  • 45
  • 92
  • 1
    Can't block address bar... stop and think about it...if every site did that how would user access it? – charlietfl Feb 21 '15 at 15:59
  • 2
    I'm sorry if the question implied so, but I don't mean to block the address bar. So in Chrome for Android, the address bar auto-hides when you scroll down and pops back up when you scroll up. This behavior enables a user to enjoy reading in full screen while scrolling down. – Ranveer Feb 21 '15 at 16:00
  • 4
    @charlietfl like this: http://i.stack.imgur.com/hpiFp.gif – Ranveer Feb 21 '15 at 16:02
  • What is impact if you serve from `http` protocol? – charlietfl Feb 21 '15 at 16:03
  • I think it would work. But I can't do so, I'm not the one handling the server. – Ranveer Feb 21 '15 at 16:08
  • @Ranveer: I noticed you fixed your Chrome bar issue, yet you have no accepted answer here... how did you fix it? – Afonso Gomes Apr 03 '16 at 02:10
  • A better cross-browser solution is discussed at: https://developers.google.com/web/fundamentals/native-hardware/fullscreen/ – MoMo Nov 13 '18 at 20:10

2 Answers2

68

Check this has everything you need

http://www.html5rocks.com/en/mobile/fullscreen/

The Chrome team has recently implemented a feature that tells the browser to launch the page fullscreen when the user has added it to the home screen. It is similar to the iOS Safari model.

<meta name="mobile-web-app-capable" content="yes">
Dimger
  • 714
  • 4
  • 3
  • 1
    what do you mean "add it to the home screen? – sivann Dec 14 '15 at 13:27
  • 3
    Found it, it was an option on the chrome menu. – sivann Dec 14 '15 at 13:31
  • Note that the user may not be able to restore the address bar afterwards if he wants to: http://android.stackexchange.com/questions/55659/how-do-i-disable-full-screen-mode-in-chrome-for-android – Ciro Santilli OurBigBook.com Jan 12 '16 at 22:49
  • 22
    I mean is it possible to hide the address bar without creating shortcut on home scree??? – Maha Dev Mar 21 '17 at 07:54
  • 1
    Now how do I get rid of the title bar across the top of the document that has the document name, URL, and three vertical dots to bring up the menu? – Michael Mar 06 '21 at 19:44
  • @MahaDev it is! read the article... you can do it with screenfull https://www.npmjs.com/package/screenfull – golder3 Sep 09 '22 at 18:18
  • nice! This is possibly the coolest yet hardest thing to find on the internet lol OK maybe slight exageration... but HUNDREDS of posts saying "its not possible".... "JustWatch.com" is how I KNEW it was possible... Thanks!! – Simon May 21 '23 at 03:19
4
window.scrollTo(0,1);

this will help you but this javascript is may not work in all browsers

Manos Nikolaidis
  • 21,608
  • 12
  • 74
  • 82
devendermahto
  • 141
  • 1
  • 4
  • 20
    This hack does NOT work on Chrome 49 when the content height is less than the viewport. Tested on Stock Android 5.1.1 Galaxy S6 Edge. – David Refoua Mar 31 '16 at 21:31