Update 01/11/2014: Since the release of iOS 8 and Safari 8, the methods of hiding the navigation bar using minimal-ui are no longer supported. There does not appear to be a decent workaround, unless you want to try a hacky JS solution to trigger a scroll.
My biggest bugbear when iOS 7 came out was the way the navigation and address bars persistently displayed in Safari in both portrait and landscape orientation. Unlike Chrome for iOS, there is no fullscreen feature in Safari, so to hide these UE bars involved scrolling a web page (and scrolling back up to make them reappear).
This wasn’t a huge issue for pages that scroll, but for single page sites or pages with little depth, this was a frustrating feature (certainly for me) and especially annoying in landscape orientation, as the browser bars take up so much of the visible height.
Hooray! Now with iOS 7.1, we have a new viewport meta tag property at our disposal: minimal-ui.
To implement this feature, all we need to do is add minimal-ui to a viewport tag, for example:
<meta name="viewport" content="minimal-ui">
Or this example using viewport tag properties commonly found on responsive sites:
<meta name="viewport" content="width=device-width; initial-scale=1; minimal-ui">
When you visit a site with a device using iOS 7.1 with minimal-ui implemented, the navigation, address and status bars are completely hidden in landscape view, and in portrait view only a thin status bar is displayed. To bring the browser bars back up again, just tap this status bar or the top of the screen.
You can see minimal-ui working on the comparison below, implemented on the new Web Dev Door site (launching soon). This looks much better. The navigation, address and status bars are now fully hidden in landscape orientation and it frees up an additional 216 pixels (iPhone 4s), which is about 1/3 of the height.