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 | Kommentieren

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

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

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

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.