optimizing a web design for the iPhone

Question

OK, I'm having some issues with my site's mobile stylesheet on the iphone. I reworked the stylesheet to be similar to what http://m.facebook.com give the browser, only I'm getting an issue where the Safari on iPhone browser is still zooming the page out from like 960px, instead of constraining it to the native screen resolution. What gives?

Do you think it has to do with my .container960 class on the body element? I tried reseting those styles with the mobile stylesheet, but maybe it's not reseting the container styles properly.

The site is http://beta.cureinternational.org. You'll need to use username Guest and password guest to view the page.

Answer 1

Have you tried adding a meta-tag like this?

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

Or hard-coding in the dimensions yourself (see Viewport in http://developer.apple.com/safari/library/documentation/appleapplications/reference/safarihtmlref/articles/metatags.html)