Introduced with iOS 7.1

I don’t have an iPhone, but my daughter does have an iPad Mini, which is running the latest iOS, 7.1. However, this only works for those of you on iPhone’s, so I see no difference.

Martin Wolf was kind enough to let me use the image from his post about this subject so that I could more easily illustrate the difference. So, even if you don’t have an iPhone, you can still see the changes this makes in the featured image above.

With the release of iOS 7.1 (and possibly late 7.0.x builds), Safari introduced support for a new value in the viewport meta tag. To me, it sounds like it adds effects similar to how Chrome hides its top bar when a page is loaded, but more. For example, the navigation buttons at the bottom are hidden.

I rarely use Safari, like never. Chrome is available on iOS, so that’s what I’ve always used. That’s not to say that you shouldn’t support Safari to it’s fullest, because I’d wager that a majority of iOS users stick with the default, which is Safari.

Chances are, your theme already has a viewport meta tag defined in it’s header.php file. If it does, add minimal-ui to it, so it should look something like this:

If your theme doesn’t already have a viewport meta tag set, you can add one with your functionality plugin or theme’s functions.php file like so:

Adding the code above will add a brand new viewport meta tag for you, so only use that if your theme isn’t already using a viewport meta tag in it’s header.php file.

That’s it!

{.later-button-el}

<p>
  I'm available for hire and always taking new clients, big and small. Got a project or an idea you'd like to discuss? Startup plan but no developer to make it happen? Just <a href='https://www.longren.io/contact/'>get in touch</a>, I'd love to see if I can help you out!
</p>

<p>
  Got a question or some updated information releavant to this post? Please, <a href='#respond' title='Leave a comment'>leave a comment</a>! The comments are a great way to get help, I read them all and reply to nearly every comment. Let's talk. 😀
</p>

<span class='do_link'><a href='https://www.digitalocean.com/?refcode=cbf49d0481c8' rel='nofollow' target='_blank'><img alt='DigitalOcean' border='0' src='https://i0.wp.com/longren.io/wp-content/uploads/2014/03/digitalocean.png?w=1100&#038;ssl=1' data-recalc-dims="1" /></a></span> <!--<h3>Need Cloud Monitoring? Try Mist.io!</h3><span class='do_link'><a href='http://mist.io/?ref=tyler' rel='nofollow' target='_blank'><img alt='Mist.io' border='0' src='https://i0.wp.com/longren.io/wp-content/uploads/2014/04/mistio.jpg?w=1100&#038;ssl=1' data-recalc-dims="1"></a></span>-->