Website width doesn't automatically fit to iPhone screen

5
votes

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?

2
iphonecssmobile
Do you have a hosted example? In what way is it too wide? Is it zoomed out or is content hanging off the viewport? - Austin Pray
No, sorry, it's a protected client site. It looks like it's actually the header image that's causing it to be too wide. Trying to determine if I can make that fit the iPhone screen width as well. - Tim Jahn

2 Answers

12
votes

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

I think you may just be off a little. This is what works for me.

 <meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1.0,maximum-scale=1.0" />