Website width doesn't automatically fit to iPhone screen

Question

I want my site's width to automatically fit on the iPhone portrait screen (testing on an iPhone 5). I currently have the width CSS set to 100% and am using this meta viewport tag:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />

This technique was recommended by this question: Website does not automatically fit to iphone screen

It doesn't work for me though. The site width is still way wider than the iPhone portrait screen.

How can I get the site width to automatically fit on the iPhone portrait screen?

Answer 1

Make sure the viewport is configured correctly:

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

Make sure you don't have content that is wider than the viewport.

For instance if you have an image that is wider than the viewport set the CSS to

max-width:100%;