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.
A:
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...
Nick Veys
2009-08-03 17:37:43
+1
A:
Seems to be based on the DOM. If you want it to zoom in, just make sure your page isn't too wide/tall on the mobile site.
Paul
2009-08-03 17:38:39
+2
A:
See the configuring the viewport part of the Apple web-app developer guide.
Epskampie
2009-08-03 17:48:31
Right, this is what I thought the question was referring to. As an example, add a <meta> element that looks like:<meta name="viewport" content="width=480">
Joe Liversedge
2009-08-03 18:05:44
Thanks! It works in Opera Mini as well. Not sure about other browsers..
Fortress
2009-08-03 20:16:50
A:
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.
Jay O'Conor
2009-08-03 17:58:57