Probably Use initial-scale=1

If you’re doing responsive design, you’re using viewport <meta> tags. These tell the browser what width it should render the viewport at. If you don’t use this tag, it will render at the device’s default, which almost certainly isn’t what you want. But even if you are using viewport <meta>, there are subtle differences in the value you put in it.

I just wanna focus on one little difference here.

I’ve used this one primarily for as long as I’ve been doing responsive design:

<meta name="viewport" content="width=device-width">

Which means “browser, render this website exactly as wide as you are naturally.”

If we look at iPhones, the 1-5 are 320px wide. The 6 is 375px wide, the 6+ is 414px wide. There are a zillion other devices out there, and they have a huge variety of viewport widths. That meta tag will tell them all to render as wide as they are. Great.

Using that tag exactly as-is above, the iPhone exhibits this weird zooming behavior when rotating the landscape:

Enter the initial-scale value! If you do this instead:

<meta name="viewport" content="width=device-width, initial-scale=1">

It keeps the same zoom:

Better, says I.

I wouldn’t doubt that initial-scale fixes other bugs too. I didn’t test it on a huge device lab or anything. That would be pretty darn interesting though. Let me know if you know of any deeper details.

And while initial-scale=1 is pretty useful, maximum-scale is bad news for accessibility.

I already do this!

Awesome. You’re way ahead of me. A lot of snippets out there include this, which is great. I might have even removed it once and didn’t notice anything bad immediately so kept it that way. I’m just dumb like that.

Remember you need more than meta tags

IE 10 in Snap Mode and Windows Phone 8 need @viewport stuff in the CSS, so remember to use this stuff.