即使向上拖动，如何隐藏移动浏览器的地址栏？

Question

I know there are many topics on this , but none of them do what Twitter/Google does.

Go to m.twitter.com on your iphone 4. When you drag, notice that the url bar never appears. UNLESS you drag Twitter's navigation bar on the top...then the url bar appears.

How can this be done?

Answer 1

By scrolling the window just enough . I've used the following in some production code.

if(/andro|iP[ha]/i.exec(navigator.userAgent) && !location.hash) scrollTo(0, 1);

EDIT: This won't prevent the URL bar from appearing at all, but it won't be visible upon page load. The only way of totally not showing the address bar that I know of is to make the web page (a single web page, mind - URL navigation not allowed) "webapp enabled" via a meta tag, and have the user add it to their home screen. That shortcut will then open a variant of Safari that has no chrome whatsoever.

Answer 2

The trick Twitter uses is to design their site with the understanding of what part of the page most users are likely to grab. In most use-cases, you're going to scroll down your Twitter stream which leaves the button bar up top intact.

Now try touching and dragging the button-bar down and you'll notice that the iPhone address bar actually appears at the top of the page. By scrolling the entire interface down upon page-load (like AKX described) and responding to the drag-events on the timeline separately from the full page, you get the perception that they've found a way to eliminate the address bar when it's not actually the case.