Reputation: 1174
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?
Upvotes: 5
Views: 17332
Reputation: 4936
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%;
Upvotes: 12
Reputation: 1150
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" />
Upvotes: 0