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:

minimal-ui-example

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.

Veröffentlicht am Donnerstag, 13. März 2014

Kommentare

  1. 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.

  2. 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.

  3. 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.

  4. 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.