12

So you can make a website go "full screen" and hide the addressbar/chrome on ipad if the user adds your page to their home screen, which makes an icon on the home screen that they launch your site from. You just put some meta tags like this:

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

However, I haven't been able to get a site to hide the browser chrome when the page is just in a normal browsing session (the user hasn't launched your site directly from an icon on their home screen). Is it possible to do so? How?

scunliffe
  • 62,582
  • 25
  • 126
  • 161
Rafe
  • 8,467
  • 8
  • 47
  • 67
  • I take it you want the behavior of say mobile Gmail, but without having to have an icon on your home screen... correct? - based on what I read here: http://daringfireball.net/linked/2008/10/03/fullscreen-iphone-web-apps it only applies if there is a home screen icon. – scunliffe Jun 22 '11 at 13:12
  • Gmail does this to some extent. You can still scroll the address bar into view with a two finger swipe downwards. Looking into their methods now. – Marcel Jun 22 '11 at 13:12
  • @Marcel Jinx indeed! - Kudos for the 2 finger swipe tip to get the address bar back! I've been looking for this ability for quite a while now! – scunliffe Jun 22 '11 at 13:16
  • @scunliffe, that's correct. I'd like to determine if it is possible (or not) to have that behavior without launching from a home screen button. – Rafe Jun 22 '11 at 13:34

2 Answers2

8

According to the Apple Docs it doesn't specifically say you can't (however as you've noted, it appears to only behave as desired when the site has been added to your home screen).

I also noted that on the Apple Support Forum the consensus seems to be that you need to launch from the home screen to get the desired effect.

Quote from Docs:

apple-mobile-web-app-capable

Sets whether a web application runs in full-screen mode.

Syntax

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

Discussion

If content is set to yes, the web application runs in full-screen mode; otherwise, it does not. The default behavior is to use Safari to display web content.

You can determine whether a webpage is displayed in full-screen mode using the window.navigator.standalone read-only Boolean JavaScript property.

Availability

Available in iOS 2.1 and later.

Community
  • 1
  • 1
scunliffe
  • 62,582
  • 25
  • 126
  • 161
3

I found this works,

$('body').delay('1000').animate({ scrollTop: '0px' }, 'slow');

I noticed that scrolling down removed it, so scrolled 60px (height of the chrome), but that hide it and scrolled down the page, but a scroll of 0px, assuming your page has started at the top (not on a # target), fools it!

I guess you could even remove the delay and animate, but I wanted it to be smooth, and not too jerky.

Blazemonger
  • 90,923
  • 26
  • 142
  • 180
Will Hancock
  • 1,240
  • 4
  • 18
  • 27