While a full screen mode sounds good, it’s not the best solution for every kind of website or webapp.ĭon’t use minimal-ui as the new default viewport value use it with responsability. Please, think twice before adding minimal-ui # Chrome can trigger a warning on console that the value is not valid, but the rest of the declaration will be used.
Therefore, the process is seamless and it will be a minimal UI experience between all your linked HTMLs avoiding UI glitches.Ī quick test says that adding minimal-ui is safe enough on the modern mobile web and different browsers, including Safari on iOS 6.x/7.0, Android Browser, Firefox, Google Chrome and IE will just ignore the declaration and set up a proper viewport anyway based on the other attributes.
That also means that the first 40 physical pixels of the page should not be used for clickable elements on that orientation that is 10 CSS pixels if you are using a width=device-width viewport or 20 CSS pixels on width=device-height (useful on portrait). You can draw there but no interaction is allowed that means that we should not use something as a small select picker on the top as in the following example because it will just trigger the toolbars. When in landscape there is no status bar or title bar, but the toolbars will appear when tapping on the top portion of your document. Minimal UI mode in different orientations I’m wondering why Apple didn’t go with the FullScreen Javascript API.
It seems there is no way to set/unset the minimal UI dynamically from code unfortunately.
The hidden toolbars will appear as modal windows only after a tap on the top portion of the screen (compared to top or bottom on mormal mode). That means there is no visible back button, besides the back gesture that is still available. No URL bar or toolbar will appear on both orientations. This mode looks different based on orientation: it includes the iOS status bar and a small title bar on portrait and nothing on landscape (immersive mode). The presence of minimal-ui in the viewport will trigger a full-screen mode automatically that will be well-received by webapps and UI frameworks (such as Sencha Touch or jQuery Mobile).
New minimal-ui viewport declaration #ĭon’t expect any update on the documentation on this (is anyone expecting an update in the outdated Safari docs anyway?), but the viewport meta tag now supports a new boolean property for iPhone and iPod touch: minimal-ui. And this is the biggest change in 7.1 for web developers. The browser in 7.1 is the same as in 7.0 in terms of APIs and abilities, so no new features to cover. There are some reports on some fixes on requestAnimationFrame and Web Workers. Some other issues for Home Screen Webapps were already solved in 7.0.3 update a month after the initial launch, such as the ability to open external URLs and the usage of standard dialogs, such as alert.Īpple has patched 19 bugs in the Web Core (for Safari, WebView and Home Screen webapps) since 7.0.3 but it’s not clear which ones.