是否可以在普通网页上隐藏iOS浏览器chrome

Question

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?

Answer 1

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.

Answer 2

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.