iPhone for Web Developers


[Bobs/Prog/Design:~] mod%
Staff member

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:
    <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:
    <meta name="viewport" content="width = 780" />