Viewport Meta Tag: Minimal-UI
With the introduction of iOS 7.1 Safari understands a new viewport meta tag which automatically reduces the mobile Safari ui to a minimum. I think it’s a great addition and hope other browsers will support it in the future, too.
<meta name="viewport" content="width=device-width, minimal-ui">Here is my blog before and after adding minimal-ui:
Hint: As a user you can get the menu bar back by tapping on the url.
Update: I wrote a follow up post explaining why minimal-ui might not be such a good idea.
Kommentare
I didn’t know that safari was updated in the latest update. I am on a jailbroken iPhone 5s with 7.0.6 and you are correct (it only works with devices running safari on 7.1). thanks for sharing! I will definitely have some use cases where this will come in handy, and hopefully other browsers follow suite.
7.0 did this as soon as you started scrolling. With 7.1 on a 4s test device, I see no difference with this tag added than previously.
This occurs on my site without the meta tag. It’s an automatic feature of safari itself caused by scrolling, it’s not a meta tag.
This is a good thing to know but as tapping on the top bar isn’t that intuitive, I would leave this for webapps or really specific uses.
Guys, its a meta tag feature for sure. Normally the bar would change on scrolling up again but it’s not happening with this meta tag. Only when you tap on it.
What Jonathan says is right. That said, I’m not so sure anymore if this is really a good thing for normal websites because it might be confusing for the average user.
Not sure I really like this. I believe things like this should really be left up to the vendor and end user. So now you go to one website and the URL bar is hidden, then another and it isn’t? Seems like that will do nothing but add confusion to the end user, which is never a good thing.
hey.
I’m wondering why my Chrome (latest version) puts this error in my console:
„The key „minimal-ui“ is not recognized and ignored. „
anyone?
Good find! Looking forward to testing this out on sites with height: 100% or top:0, bottom:0.
iOS7’s Safari didn’t trigger a refire of the viewport event when the UI moved and resized the viewport, a really annoying behavior.