mdnky
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 (http://developer.apple.com/iphone/designingcontent.html#embed_movies_in_webpages) are supported in specific formats. Should be optimized for Edge and for WiFi (http://developer.apple.com/iphone/designingcontent.html#encode_video_for_wi-fi_and_edge).
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" />
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 (http://developer.apple.com/iphone/designingcontent.html#embed_movies_in_webpages) are supported in specific formats. Should be optimized for Edge and for WiFi (http://developer.apple.com/iphone/designingcontent.html#encode_video_for_wi-fi_and_edge).
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" />