Website width doesn't automatically fit to iPhone screen

css, iphone, mobile

Solution

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%;

Problem

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?

Original source