automatic zoom on iphone safari

Question

Is there a way for Mobile Safari to recognize a site meant for mobile phones and automatically zoom in? How does that work on other phones and browsers?

I'd like to avoid looking at user_agent and sending a different page for each mobile browser.

Answer 1

See the configuring the viewport part of the Apple web-app developer guide.

Answer 2

I just noticed that if you have your body or main wrapper div height set to 100%, this can mess with how far out it zooms/renders on a mobile browser. Confirmed this in mobile safari and android's chrome browser. Once I set the #siteWrapper height from 100% to auto, it then rendered at a much better scale.

(height 100% on a main wrapper is often used with sticky footers.)

Answer 3

Sites can recognize a mobile browser and produce output accordingly, that's usually the desired way.

Safari will detect the width and zoom-to-fit, but beyond that...

Answer 4

You can avoid having different pages based on User Agent by using conditional CSS. Apple actually has some very good documentation on creating web pages that can support Safari on the iPhone along with desktop browsers.

I would recommend starting with reading iPhone Human Interface Guidelines for Web Applications. This will give you a good start in using conditional CSS to customize pages on the basis of device characteristics (such as screen size) rather than User Agent.