Responsive Design tip: Resize your mobile viewport on reflow

Update: I am no longer using this method but rather have reverted back to the original meta tag which is now working great.

<meta id="view" name="viewport" content="width=device-width, initial-scale=1.0" />

Removing the users option to zoom probably wasn’t the best solution but served the purpose at the time.

< /end update>

—————————————————————-
This little bit of information arrived into my inbox this morning via a friend and it got me so excited I had to share it.

You know how when you rotation your iPhone or iPad from portrait to landscape your site doesn’t resize properly? Yeah, that annoying thing.

responsive-design-portrait-view
Looking good in portrait view.

responsive-design-landscape-view
But once your view port is rotated, it’s not so pretty anymore and required some pinching to recenter.

Well folks, here is the fix.

All you need to do is switch this lovely meta line

<meta id="view" name="viewport" content="width=device-width, initial-scale=1.0" />

To this

<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1" />

And *Presto*! It’s now resizing properly.

Until this morning the only fix I knew about was a javascript one, which IMHO, is not a great solution. I’m pretty sure I’ve seen similar solutions in the past, so I’m not quite sure why this is now working. Feel free to let me know in the comments if you know.

8 thoughts on “Responsive Design tip: Resize your mobile viewport on reflow

  1. God bless your soul! I am doing my first responsive design and and been tearing my hair out over this one. What an easy fix. Thank you so much for sharing!!

  2. Oh how I wish I could go back in time and gain back the last three hours I’ve spent racking my brain on this one,

    worked splendidly!

    THANK YOU!

  3. I figured this one out the hard way after spending hours scaling my fonts to 200%. What an easy fix! One thing to watch out for, however, is that is your site is not responsive, don’t use the tag because it can make it difficult to navigate.

Leave a Reply

Your email address will not be published. Required fields are marked *