

iOS 7.1 Mobile Safari Minimal UI - __DarkBlue
http://darkblue.sdf.org/weblog/ios-7-dot-1-mobile-safari-minimal-ui.html
The Mobile Safari &#x27;minimal-ui&#x27; property has landed... and it&#x27;s awesome!
======
untog
This fixes one of my biggest annoyances with iOS7 Safari - that it 'steals'
50px or so of tappable space at the bottom of the screen. If you try to use
it, it shows the bottom bar instead of allowing you to interact with the page.

 _That said_ , this is kind of not-good-at-all. An individual page shouldn't
be able to control UI like this, IMO. A lot of the changes Apple made to
Safari in iOS7 were bad ones, and they seem to have invented a new meta tag to
get around admitting that they mis-stepped.

~~~
__DarkBlue
Yes, if the browser hid the chrome by default that would be the best possible
UI. It would also ensure a consistency across all web-sites.

~~~
xahrepap
Chrome on Android does that. I hate it. Whenever I scroll a line or two too
far and want to scroll back, I have to go twice as far because the chrome
decides to come back. I would welcome an alternative though.

~~~
bergie
It is actually a bit worse than that. The Chrome display changes on scroll
also fire a window resize event, causing pages that use this information to
reflow when you just scrolled. I suppose they were thinking people don't ever
size anything based on window height?

------
bluetidepro
There were some good comments on Designer News about this:
[https://news.layervault.com/stories/17576-viewport-meta-
tag-...](https://news.layervault.com/stories/17576-viewport-meta-tag-
minimalui)

Here are a few comments below that I strongly agree with why this is a BAD
change by Apple. This change kills the browser UX.

> "This reminds me of the era of chromeless popup windows. I do not like this
> move by Apple. A site should not be capable of deciding to make changes to a
> users browser UI. Especially changes that aren't explained. I'm actually
> disappointed this exists."

> "Think about usability: the user will not have the back, the share and the
> tabs buttons available by default. If you are creating an inmersive game or
> a webapp with the main navigation controls then minimal-ui is a good idea;
> for content- and document-based websites, it might not be nice for the
> user."

~~~
grrowl
It only concerns me that the browser chrome is removed entirely. At very least
the status bar should remain to give the user an obvious "system" element to
touch to return to the full chrome.

~~~
baddox
The screenshots in this article are deceptive. What the meta tag does is make
Safari _always_ look how it normally looks when you scroll down from the top
of a web page. So, in portrait mode, there will be a small top bar showing the
website URL. In landscape mode, there will be no top bar at all. Here's a
screenshot from the other commenter's website on my iPhone:

[http://i.imgur.com/Y1rojH9.png](http://i.imgur.com/Y1rojH9.png)

------
dictum
Because every submission should have a pessimistic, cynical reply: I expect
this to be used to its full potential by phishing sites.

Aside from that: _finally._

~~~
stingraycharles
How would that work, a full-screen emulation of safari in js?

~~~
dictum
It would be trivial to imitate Mobile Safari's chrome with
"actuallegitdomain.com" in the address bar instead of
"actuallegitdomain.com.ooo.ag" or resorting to IDN tricks (since most
browsers, and I think Mobile Safari too, show the xn--wh4t3v3r.com version).

------
craigc
Am I the only person who thinks that nearly every feature added in iOS 7 and
iOS 7.1 is pretty terrible?

This is just another example. It's great in theory, but this should not be
something that is left up to the content creators to decide.

It provides an inconsistent user experience for the person USING the browser.
Imagine if you were using Chrome or Safari on desktop and you had to guess if
the url bar and back button would be there every time you clicked a link to go
to a new page. I suppose it is fine if you want people to feel like they are
trapped on your page.

Awful.

~~~
coin
I could not agree more. Let the user decide if they want fullscreen. We
already have to put up with disabled zoom, mobile "optimized" site with
missing content, and annoying animations.

------
Geee
Damn, there's a bug. In the minimal-ui mode, if you press the url bar, then
'share' -> 'add to home screen', and then 'cancel', the page is frozen and you
can't tap it to return the control to the web page. You need to press back
once or do something else to get rid of the thing.

------
AshleysBrain
It's definitely useful, but also a bit of a shame they went non-standard. The
Fullscreen API can do this in a cross browser way and with more features.

------
rblatz
It's about time, since Safari on iOS 7 broke the hacks that hid the browser
chrome we've been offering a substandard experience on iOS in our mobile image
spinner. This allows us to get back to the experience available on android,
desktop and older versions of iOS.

~~~
ihuman
Which substandard experience are you talking about? Users never been able to
hide the browser UI before, unless the user added the website as a shortcut on
the springboard.

~~~
untog
You (as a developer) could scroll by 1px to remove the address bar in iOS6. It
was useful to give your page it's own top navigation or just have more content
visible. That was not possible in iOS7.

~~~
ketralnis
> give your page it's own top navigation

So you want to fill the user's limited screen real estate with your own
useless crap (usually "download our app and subscribe to our emails!"), and
you're worried that the actual functional bits of the browser are getting in
the way of your doing that?

~~~
erichate
yes, in our experience building games this has been a major issue / concern
for iphone players.

~~~
err4nt
because for interacting with web apps those default browser buttons are just
as 'dangerous' as ads for the user accidentally tapping them and navigating
away from the page

------
thekingshorses
I use it at [http://hn.premii.com/](http://hn.premii.com/)

I can't believe they didn't tested orientation change with minimal-ui.

Also, in landscape mode, you loose top ~30px area. If you tap there, it will
show safari chrome, and your app won't receive tap.

~~~
alansk
Hi, I thought I should tell you that I actually stopped using your site after
this feature was added, because previously I could tap the bottom of the
screen to get the bottom bar up, but now I can't. You might lose other users
because of this, I guess.

------
jcruz
Is this different than using <meta name="apple-mobile-web-app-capable"
content="yes">?

~~~
TazeTSchnitzel
That requires adding the page to the home screen.

------
shaunol
This doesn't appear to do anything for me on my iPad, is this an iPhone only
thing?

This is great for me as a developer for an internal-use website that primarily
targets tablets.

~~~
__DarkBlue
Yes, this applies to the iPhone only according to the release notes.

------
grinich
Now if only we could get rid of the hamburger button...

~~~
stefan_kendall3
It's become an idiom. Stoplights may not be the best way to control
intersections, but you know what to do when you see one.

------
gcb0
Why it's a site controlled tag and not a browser option? This is crazy

~~~
__DarkBlue
I'd prefer a browser option myself too. But, this is what we've got for now.

------
cseelus
From the source: "It’s not appropriate for every web page, but it’s great for
image galleries and web-sites that mimic mobile apps."

I think this sums it up quite nicely

------
tiziano88
Sounds similar to the "immersive full-screen" mode on Android, which is
supported by Chrome and also other apps (ebook readers, games, etc...).

------
kosso
Hallelujah.

Now, give us a way to stop the swipe-to-go-back gesture. Or get rid of it all
together, like they did on Android.

------
badman_ting
"As you can see, some content just cries out for a full-screen display. Now,
with minimal-ui, we can do just that."

True but this cannot be done programmatically, only with the meta value when
the document loads, so you better have that sort of content in its own
document.

~~~
__DarkBlue
"this cannot be done programmatically" \- are you sure about that? I think any
half-decent programmer would be able to do this programmatically. A simple
logic condition (if-then-else) should cover it.

~~~
badman_ting
Gotta love HN.

------
amirmansour
This makes me happy. Thanks for the tip.

------
deaquino
I'm getting this error on Chrome: The key "minimal-ui" is not recognized and
ignored.

~~~
__DarkBlue
That makes sense, the key is only recognised by the Mobile Safari on the
iPhone.

------
jbrooksuk
"Not Found". Looks like it's been taken down by HackerNews!

~~~
__DarkBlue
It's back up now. Nothing to do with HN, I think the host messed up.

------
zomg
kudos for using sdf.org, they've been around for a long, long time :)

~~~
__DarkBlue
I've been with SDF for years. I cut my Unix teeth on their servers. They're a
fantastic host and I am very impressed that their "Meta Array" coped with the
influx of HN traffic without skipping a beat. I've been periodically checking
the site, with an empty cache, while this link was on the HN front page and
page delivery was consistently sub-1s. Theirs is extremely cheap hosting too.
I have nothing but praise for the SDF.

