HTML
From IPhone Developers' Wiki
Contents |
[edit] Viewport Information
The viewport meta tag properties are:
- width The default is 980. The range is [200, 10,000].
- height The default is calculated based on the width and aspect ratio. The range is [223, 10,000].
- initial-scale is the scale to render the page when it first loads. The default fits the page to the screen. The range is [minimum-scale, maximum-scale]. Keep in mind that the user can change the scale, either through the pinch gesture or by a double tap.
- user-scalable determines whether or not the user can scale the page. The default is yes.
- minimum-scale is the lower bound for scaling. The default is 0.25; the range is [>0, 10].
- maximum-scale is the upper bound for scaling. The default is 1.6; the range is [>0, 10].
You do not need to set each property. If only a subset of the properties are set, then Safari on iPhone attempts to infer the other values. For example, if you set the scale to 1.0, Safari assumes the width is 320 pixels in portrait and 480 pixels in landscape orientation. Therefore, if you want the width to be 980 pixels and the initial scale to be 1.0, then set both of these properties.
Here are some examples of using the viewport meta tag:
<meta name="viewport" content="width = 320" />
<meta name="viewport" content="initial-scale=2.3, user-scalable=no" />
<meta name="viewport" content="width=480; initial-scale=0.6666; maximum-scale=1.0; minimum-scale=0.6666" />
The recommended viewport width for web applications is 320 pixels. This renders the web application with a scale of 1.0 and doesn't change the layout when you switch to landscape orientation.
[edit] Two-finger scrolling
If you have a Frame or iFrame, content in that Frame will be two-finger scrollable by default.
Alternatively, you can have a[edit] Linking stylesheets using media queries
To specify a style sheet that is just for iPhone without affecting other devices, you use the only keyword in combination with the screen keyword, as follows:
<link media="only screen and (max-device-width: 480px)" href="iPhone.css" type="text/css" rel="stylesheet" />
Older browsers ignore the only keyword and won’t read your iPhone style sheet. To specify a style sheet for devices other than iPhone, use an expression similar to the following:
<link media="screen and (min-device-width: 481px)" href="not-small-device.css" type="text/css" rel="stylesheet" />
For more information on media queries, see: http://www.w3.org/TR/css3-mediaqueries/
[edit] Pop-up Keyboard Presets
[edit] iPhone interaction links
[edit] SMS links
only confirmed to work in emails
<sms://1888555tell>
[edit] Telephone links
A link to a phone number looks like this:
<a href="tel:1-408-555-5555">1-408-555-5555</a>
If you don’t wrap phone numbers in a link, Safari automatically converts any number that takes the form of a phone number to a telephone link. If your page contains a series of numbers that could be interpreted as a phone number, but isn’t, you need to break up the numbers using span elements, for example.
New for iPhone version 1.1.1 is a meta tag when can be used so that Safari won't automatically convert numbers it thinks are phone numbers into phone number links. Just use the following:
<meta name = "format-detection" content = "telephone=no">
Apple Developer Documentation on using Phone Links
note! there is a potential security hole where the number in the href may not be the number linked, which could allow the user to be misled into dialing a different number (say a 1-900 number)
tel: is a standard governed by RFC 2806: http://www.ietf.org/rfc/rfc2806.txt
[edit] Mail links
Mail links open a built-in mail compose sheet
<a href="mailto:frank@wwdcdemo.example.com">John Frank</a>
I've just put in a mailto: link in TeleMoose that has a pre-filled subject and body. What's interesting is that the body's content that you specify in the mailto link is actually interpreted as HTML, which is different than the standard (plain text), and how Apple Mail implements it.
So just be careful in generating a mailto: link; make sure that for the iphone, that you are generating HTML, not plain text -- e.g. for newlines, you'd use <br>; escape your < > & characters, etc.
[edit] Google maps
Google maps links open a built-in Google client rather than making a connection through the public website.
This link opens to a point on a map (Cupertino, California):
<a href="http://maps.google.com/maps?q=cupertino">Cupertino</a>
This link provides directions between two points, San Francisco and Cupertino:
<a href="http://maps.google.com/maps?daddr=San+Francisco,+CA&saddr=cupertino">Directions</a>
Any URLs in your html beginning with the text http://maps.google.com/maps? will instead of opening the web page be coerced to be displayed in the iPhone's internal map application.
The built-in iPhone application currently ignores many map? parameters. You can use query, location, directions, and specify a descriptive label using the + (Label+Text) parameter. However, you cannot use the t= parameter to specify the Satellite map, the z= parameter to indicate the map zoom level, layer=t to turn on the Traffic display, and so on.
Example:
<a class="cuiServiceButton" target="_self" href="http:// maps.google.com/maps?q=1000+Massachusetts+Ave,+Boston,+MA+(Jack's +Office)">Map To Office</a>
In Google Maps, the label is "Jack's Office".
[edit] YouTube links
YouTube links open up into the built-in video client rather than making a connection through the public website. The supported YouTube URL formats are as follows, where you replace <video identifier> with the YouTube video identifier and the preceding www. is optional:
http://www.youtube.com/watch?v=<video identifier> http://www.youtube.com/v/<video identifier>
Example:
<a href="http://www.youtube.com/v/FN1KW6xBSO4">Play My Cat Video</a>
