title: iOS 8 removed "minimal-ui" viewport property, are there other "soft fullscreen" solutions?
body: <p>(This is a multi-part question, I will try my best to summarise the scenario.)</p>
  
  <p>We are currently building a responsive web app (news reader) that allow users to swipe between tabbed content, as well as scroll vertically inside each tabbed content.</p>
  
  <p>A common approach to the problem is to have a wrapper <code>div</code> that fills the browser viewport, set <code>overflow</code> to <code>hidden</code> or <code>auto</code>, then scroll horizontally and/or vertically inside it.</p>
  
  <p>This approach is great but has one main drawback: <strong>since the height of the document is exactly the same as the browser viewport, the mobile browser will not hide the address bar/navigation menu</strong>.</p>
  
  <p>There are <a href="http://www.html5rocks.com/en/mobile/fullscreen/" rel="noreferrer">numerous hacks and viewport properties</a> that enable us to get more screen real estate, but none are quite as effective as <code>minimal-ui</code> (introduced in iOS 7.1).</p>
  
  <p>News came yesterday that iOS 8 beta4 had removed <code>minimal-ui</code> from Mobile Safari (see Webkit section in <a href="https://developer.apple.com/library/prerelease/ios/releasenotes/General/RN-iOSSDK-8.0/" rel="noreferrer">iOS 8 Release Notes</a>), which left us wondering:</p>
  
  <p><strong>Q1. Is it still possible to hide the address bar on Mobile Safari?</strong></p>
  
  <p>As far as we know, iOS 7 <a href="http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review" rel="noreferrer">no longer responds</a> to the <code>window.scrollTo</code> hack, this suggests we have to live with the smaller screen space, unless we adopt a vertical layout or use <code>mobile-web-app-capable</code>.</p>
  
  <p><strong>Q2. Is it still possible to have a similar soft fullscreen experience?</strong></p>
  
  <p>By <em>soft fullscreen</em> I really mean without using the <code>mobile-web-app-capable</code> meta tag.</p>
  
  <p>Our web app is built to be accessible, any page can be bookmarked or shared using the native browser menu. By adding <code>mobile-web-app-capable</code> we prevent users from invoking such menu (when it's saved to homescreen), which confuses and antagonises users.</p>
  
  <p><code>minimal-ui</code> used to be the middle-ground, hiding the menu by default but <a href="http://www.mobilexweb.com/blog/ios-7-1-safari-minimal-ui-bugs" rel="noreferrer">keeping it accessible with a tap</a> -- though Apple might have removed it due to other accessibility concerns (such as users not knowing where to tap to activate the menu).</p>
  
  <p><strong>Q3. Is a fullscreen experience worth the trouble?</strong></p>
  
  <p>It would seem that a <a href="http://caniuse.com/fullscreen" rel="noreferrer">fullscreen API</a> is not coming to iOS anytime soon, but even if it is, I don't see how the menu will be kept accessible (same goes for Chrome on Android).</p>
  
  <p>In this case, maybe we should just leave mobile safari as it is, and account for viewport height (for iPhone 5+, it's 460 = 568 - 108, where 108 includes the OS bar, address bar and navigation menu; for iPhone 4 or older, it's 372).</p>
  
  <p><strong>Would love to hear some alternatives (besides building a native app).</strong></p>