iPhone for Web Developers

**mdnky** · #1 July 4th, 2007, 02:31 PM

http://developer.apple.com/iphone/designingcontent.html

Thought this might be a good link for some of us. It does serve as a good primer for anyone wanting to ensure as much compatibility as possible between their site and the iPhone.

A couple of interesting notes:

Partial CSS 3 (I know the 'border-radius" style works).
No support for hover styles, mouse-overs or tool-tips.
Pay attention to forms. Safari-iPhone doesn't work with input tags with the type set to "file".
Embedded movies are supported in specific formats. Should be optimized for Edge and for WiFi.

If you want to specify an iPhone specific sheet, use the following:

Code:

<link media="only screen and (max-device-width: 480px)"
	href="iPhone.css" type="text/css" rel="stylesheet" />

The default width for the viewport is 980px. You can change this by setting a meta tag. So if your page is scaling with too much space on the edges (say its 780px wide), then set the following:
Code:
```
<meta name="viewport" content="width = 780" />
```