This can get a little complicated owing to the different types of mobile devices. For best results, build a seperate mobile site -- a much simplified version of your desktop site. Then provide links to your main site for the devices that can support it. Test site on various web devices.
Build Mobile Sites
Build iPhone, iTouch, iPad web sites & apps
Or choose a liquid layout for desktops/laptops & iPhones
1 person found this helpful
Do not forget to set the viewport tag or your site will look awfull on the iPhone/iPod Touch device !
Exemple : <meta name="viewport" content="width=320; user-scalable=false" />
Good point, Martin. I think the meta tag is important to include. But wouldn't device-width be better to allow for Landscape viewing (480px)?
<meta name="viewport" content="width=device-width" />
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
Could you give me a bit more info on the meta tag you mention.
Is this a tag that should go into a page built specificaly for mobile/iphone , or a tag that goes into a generic page that the mobile device picks up?
You can read more about it here:
AFAIK, you can use the "viewport meta tag" in your main site pages without a problem. From what little testing I've done so far, other browsers appear to ignore it.
The viewport tag is use to display a page on the iPhone/iPod Touch devices. You do need it to display your page correctly or your design will be as small as possible to fit the device screen. I personally experiment that issue!
Source Apple.com: When referring to the dimensions of a device, you should use the constants described in “Special viewport property values” instead of hard-coding specific numeric values. For example, use device-width instead of 320 for the width, and device-height instead of 480 for the height in portrait orientation.
So Nancy is right. It’s better to use device-width instead of specifi value.
Initial-scale is for when the page load, the default size is 100% (1). You can change it with the initial-scale property.
And when you pinch the device’s screen with your fingers, it zoom. But if you don’t want this to happen, set the user-scalable property to no.