element—then Safari on iOS scales the viewport to fit the block
width in the visible area. The first time a webpage is rendered, Safari on iOS gets the width of the block and
determines an appropriate text scale so that the text is legible.
2012-09-19 | © 2012 Apple Inc. All Rights Reserved.
58
Customizing Style SheetsIf the automatic text size-adjustment doesn’t work for your webpage, then you can either turn this feature off
or specify your own scale as a percentage. For example, text in absolute-positioned elements might overflow
the viewport after adjustment. Other pages might need a few minor adjustments to make them look better.
In these cases, use the -webkit-text-size-adjust CSS property to change the default settings for any
element that renders text.
Figure 4-1 compares a webpage rendered by Safari on iOS with -webkit-text-size-adjust set to auto,
none, and 200%. On iPad, the default value for -webkit-text-size-adjust is none. On all other devices,
the default value is auto.
Figure 4-1 Comparison of text adjustment settings
Auto None 200%
To turn automatic text adjustment off, set -webkit-text-size-adjust to none as follows:
html {-webkit-text-size-adjust:none}
To change the text adjustment,set -webkit-text-size-adjust to a percentage value asfollows, replacing
200% with your percentage:
html {-webkit-text-size-adjust:200%}
Listing 4-1 shows setting this property for different types of blocks using inline style in HTML.
Customizing Style Sheets
Adjusting the Text Size
2012-09-19 | © 2012 Apple Inc. All Rights Reserved.
59Listing 4-1 Setting the text size adjustment property
Highlighting Elements
By default, when the user taps a link or a JavaScript clickable element, Safari on iOS highlights the area in a
transparent gray color. Using the -webkit-tap-highlight-color CSS property, you can either modify or
disable this default behavior on your webpages.
The syntax for setting this CSS property is:
-webkit-tap-highlight-color:
This is an inherited property that changes the tap highlight color, obeying the alpha value. If you don’t specify
an alpha value, Safari on iOS applies a default alpha value to the color. To disable tap highlighting, set the
alpha to 0 (invisible). If you set the alpha to 1.0 (opaque), then the element won’t be visible when tapped.
Listing 4-2 uses an alpha value of 0.4 for the custom highlight color shown on the right in Figure 4-2.
Listing 4-2 Changing the tap highlight color
default highlight color
custom highlight color
Customizing Style Sheets
Highlighting Elements
2012-09-19 | © 2012 Apple Inc. All Rights Reserved.
60
Figure 4-2 Differences between default and custom highlighting
Default highlight Custom highlight
Note that changing this behavior does not affect the color of the information bubble when the user touches
and holds.
You can also use the -webkit-tap-highlight-color CSS property in combination with setting a touch
event to configure buttons to behave similar to the desktop. On iOS, mouse events are sent so quickly that
the down or active state is never received. Therefore, the :active pseudo state is triggered only when there
is a touch eventset on the HTML element—for example, when ontouchstart isset on the element asfollows:
Now when the button is tapped and held on iOS, the button changes to the specified color without the
surrounding transparent gray color appearing.
Read “Handling Events” (page 68) for the definition of a clickable element. See "-webkit-tap-highlight-color" in
Safari CSS Reference to learn more about this property. Read “Handling Multi-Touch Events” (page 74) for
details on touch events.
Customizing Style Sheets
Highlighting Elements
2012-09-19 | © 2012 Apple Inc. All Rights Reserved.
61There are many adjustments you can make to your forms so that they work better on iOS. The forms should
fit neatly on the iOS screen, especially if you are designing a web application specifically for iOS. Web applications
can have a rich user interface and even look like native applications to the user. Consequently, the user may
expect them to behave like native applications, too.
This chapter explains what you can do to make your forms work well on iOS:
● Take into account the available screen space when the keyboard is and isn’t displayed.
● Use CSS extensions to create custom controls.
● Control where automatic correction and capitalization are used.
See iOS Human Interface Guidelines for more tips on laying out forms and designing web applications for iOS.
Read “Hiding Safari User Interface Components” (page 89) for how to use the full-screen like a native application.
Laying Out Forms
The available area for your forms changes depending on whether or not the keyboard is displayed on iOS. You
should compute this area and design your forms accordingly.
Figure 5-1 shows the layout of Safari controls when the keyboard is displayed on iPhone. The status bar that
appears at the top of the screen contains the time and Wi-Fi indicator. The URL text field is displayed below
the status bar. The keyboard is used to enter text in forms and is displayed at the bottom of the screen. The
form assistant appears above the keyboard when editing forms. It contains the Previous, Next, and Done
buttons. The user taps the Next and Previous buttons to move between form elements. The user taps Done
2012-09-19 | © 2012 Apple Inc. All Rights Reserved.
62
Designing Formsto dismissthe keyboard. The button bar containsthe back, forward, bookmarks, and page buttons and appears
at the bottom of the screen. The tool bar is not visible when the keyboard is visible. Your webpage is displayed
in the area below the URL text field and above the tool bar or keyboard.
Figure 5-1 Form metrics when the keyboard is displayed
Status bar: 20 pixels
URL text field: 60 pixels
Form assistant: 44 pixels
Keyboard: 216 pixels
480 pixels
Table 5-1 contains the metrics for the objects that you need to be aware of, in both portrait and landscape
orientation, when laying out forms to fit on iPhone and iPod touch.
Table 5-1 Form metrics
Object Metrics in pixels
Status bar Height = 20
URL text field Height = 60
Form assistant Height = 44
Portrait height = 216
Landscape height = 162
Keyboard
Portrait height = 44
Landscape height = 32
Button bar
Designing Forms
Laying Out Forms
2012-09-19 | © 2012 Apple Inc. All Rights Reserved.
63Use this information to compute the available area for your web content when the keyboard is and isn't
displayed. For example, when the keyboard is not displayed, the height available for your web content on
iPhone is 480 - 20 - 60 - 44 = 356. Therefore, you should design your content to fit within 320 x 356 pixels in
portrait orientation. If the keyboard is displayed, the available area is 320 x 140 pixels on iPhone.
iOS Note: In iOS 1.1.4 and earlier, the keyboard height in landscape orientation on iPhone and iPod
touch was 180 pixels.
Customizing Form Controls
Form controls in Safari on iOS are resolution independent and can be styled with CSS specifically for iOS. You
can create custom checkboxes, text fields, and select elements.
For example, you can create a custom checkbox designed for iOS as shown in Figure 5-2 with the CSS code
fragment in Listing 5-1. This example uses the -webkit-border-radius property—an Apple extension to
WebKit. See Safari CSS Reference for details on more WebKit properties.
Figure 5-2 A custom checkbox
Listing 5-1 Creating a custom checkbox with CSS
{
Designing Forms
Customizing Form Controls
2012-09-19 | © 2012 Apple Inc. All Rights Reserved.
64width: 100px;
height: 100px;
-webkit-border-radius:50px;
background-color:purple;
}
Figure 5-3 shows a custom text field with rounded corners corresponding to the CSS code in Listing 5-2 (page
65).
Figure 5-3 A custom text field
Listing 5-2 Creating a custom text field with CSS
{
-webkit-border-radius:10px;
}
Designing Forms
Customizing Form Controls
2012-09-19 | © 2012 Apple Inc. All Rights Reserved.
65Figure 5-4 shows a custom select control corresponding to the CSS code in Listing 5-3 (page 66).
Figure 5-4 A custom select element
Listing 5-3 Creating a custom select control with CSS
{
background:red;
border: 1px dashed purple;
-webkit-border-radius:10px;
}
Configuring Automatic Correction and Capitalization
You can also control whether or not automatic correction or capitalization are used in your forms on iOS. Set
the autocorrect attribute to on if you want automatic correction and the autocapitalize attribute to a
value if you want automatic capitalization. If you do notset these attributes, then the browser chooses whether
or not to use automatic correction or capitalization. For example, Safari on iOS turns the autocorrect and
autocapitalize attributes off in login fields and on in normal text fields.
For example, the following line turns the autocorrect attribute on:
Designing Forms
Configuring Automatic Correction and Capitalization
2012-09-19 | © 2012 Apple Inc. All Rights Reserved.
66
The following line turns the autocorrect attribute off:
In iOS 5.0, the autocapitalize attribute allows finer control on how automatic capitalization behaves than
just specifying on and off values. For example, if autocapitalize is words, each word is capitalized, as in
“Jane Doe,” appropriate for a first and last name input field. If autocapitalize is characters, each letter
is capitalized, as in “NY” and “CA,” appropriate for a state input field.
You can also use the autocorrect and autocapitalize attributes on
Refer to autocorrect and autocapitalize in Safari HTML Reference for all possible values and defaults.
Designing Forms
Configuring Automatic Correction and Capitalization
2012-09-19 | © 2012 Apple Inc. All Rights Reserved.
67This chapter describes the events that occur when the user interacts with a webpage on iOS. Forms and
documents generate the typical events in iOS that you might expect on the desktop. Gestures handled by
Safari on iOS emulate mouse events. In addition, you can register for iOS-specific multi-touch and gesture
events directly. Orientation events are another example of an iOS-specific event. Also, be aware that there are
some unsupported events such as cut, copy, and paste.
Gestures that the user makes—for example, a double tap to zoom and a flick to pan—emulate mouse events.
However, the flow of events generated by one-finger and two-finger gestures are conditional depending on
whether or not the selected element is clickable or scrollable as described in “One-Finger Events” (page 69)
and “Two-Finger Events” (page 72).
A clickable element is a link, form element, image map area, or any other element with mousemove, mousedown,
mouseup, or onclick handlers. A scrollable element is any element with appropriate overflow style, text areas,
and scrollable iframe elements. Because of these differences, you might need to change some of your elements
to clickable elements, as described in “Making Elements Clickable” (page 73), to get the desired behavior in
iOS.
In addition, you can turn off the default Safari on iOS behavior as described in “Preventing Default
Behavior” (page 79) and handle your own multi-touch and gesture events directly. Handling multi-touch and
gesture events directly gives developers the ability to implement unique touch-screen interfaces similar to
native applications. Read “Handling Multi-Touch Events” (page 74) and “Handling Gesture Events” (page 77)
to learn more about DOM touch events.
If you want to change the layout of your webpage depending on the orientation of iOS, read “Handling
Orientation Events” (page 79).
See “Supported Events” (page 81) for a complete list of events supported in iOS.
On iOS, emulated mouse events are sent so quickly that the down or active pseudo state of buttons may never
occur. Read “Highlighting Elements” (page 60) for how to customize a button to behave similar to the desktop.
It’s very common to combine DOM touch events with CSS visual effects. Read Safari CSS Visual Effects Guide
to learn more about CSS visual effects.
2012-09-19 | © 2012 Apple Inc. All Rights Reserved.
68
Handling EventsOne-Finger Events
This section uses flow charts to break down gestures into the individual actions that might generate events.
Some of the events generated on iOS are conditional—the events generated depend on what the user is
tapping or touching and whether they are using one or two fingers. Some gestures don’t generate any events
on iOS.
One-finger panning doesn’t generate any events until the userstops panning—an onscroll event is generated
when the page stops moving and redraws—as shown in Figure 6-1.
Figure 6-1 The panning gesture
Pan (no events)
Finger down
Finger stop
onscroll
Finger move
Displaying the information bubble doesn’t generate any events as shown in Figure 6-2. However, if the user
touches and holds an image, the image save sheet appears instead of an information bubble.
Handling Events
One-Finger Events
2012-09-19 | © 2012 Apple Inc. All Rights Reserved.
69iOS Note: The image save sheet appears on iOS 2.0 and later.
Figure 6-2 The touch and hold gesture
Information bubble
(no events)
Finger down
Finger held down
Clickable element
Handling Events
One-Finger Events
2012-09-19 | © 2012 Apple Inc. All Rights Reserved.
70Finally, a double tap doesn’t generate any events either as shown in Figure 6-3.
Figure 6-3 The double-tap gesture
Finger down
Quick finger up
Double-tap zoom
(no events)
Quick finger down
Quick finger up
Handling Events
One-Finger Events
2012-09-19 | © 2012 Apple Inc. All Rights Reserved.
71Mouse events are delivered in the same order you'd expect in other web browsers illustrated in Figure 6-4. If
the user taps a nonclickable element, no events are generated. If the user taps a clickable element, events
arrive in this order: mouseover, mousemove, mousedown, mouseup, and click. The mouseout event occurs
only if the user taps on another clickable item. Also, if the contents of the page changes on the mousemove
event, no subsequent events in the sequence are sent. This behavior allows the user to tap in the new content.
Figure 6-4 One-finger gesture emulating a mouse
Content change
Finger down
Not a clickable
element
No events
Finger up
Clickable element
mouseover, mousemove No events
No content change
mousedown, mouseup, click
Two-Finger Events
The pinch open gesture does not generate any mouse events as shown in Figure 6-5.
Figure 6-5 The pinch open gesture
Fingers separate Pinch zoom
(no events)
Two fingers down
Figure 6-6 illustrates the mouse events generated by using two fingers to pan a scrollable element. The flow
of events is as follows:
Handling Events
Two-Finger Events
2012-09-19 | © 2012 Apple Inc. All Rights Reserved.
72●
If the user holds two fingers down on a scrollable element and moves the fingers, mousewheel events
are generated.
●
If the element is not scrollable, Safari on iOS pans the webpage. No events are generated while panning.
● An onscroll event is generated when the user stops panning.
Figure 6-6 Two-finger panning gesture
Two fingers down
Scrollable element
Two fingers move
Not a scrollable element
mousewheel
Pan (no events)
Finger stop
onscroll
Form and Document Events
Typical events generated by forms and documents include blur, focus, load, unload, reset, submit,
change and abort. See “Supported Events” (page 81) for a complete list of supported events on iOS.
Making Elements Clickable
Because of the way Safari on iOS creates events to emulate a mouse, some of your elements may not behave
as expected on iOS. In particular, some menus that only use mousemove handlers, as in Listing 6-1, need to
be changed because iOS doesn’t recognize them as clickable elements.
Listing 6-1 A menu using a mouseover handler
To fix this, add a dummy onclick handler, onclick = "void(0)", so that Safari on iOS recognizes the
span element as a clickable element, as shown in Listing 6-2.
Listing 6-2 Adding an onclick handler
WHERE TO BUY
Handling Multi-Touch Events
You can use JavaScript DOM touch event classes available on iOS to handle multi-touch and gesture events
in a way similar to the way they are handled in native iOS applications.
If you register for multi-touch events, the system continually sends TouchEvent objectsto those DOM elements
as fingers touch and move across a surface. These are sent in addition to the emulated mouse events unless
you prevent this default behavior as described in “Preventing Default Behavior” (page 79). A touch event
provides a snapshot of all touches during a multi-touch sequence, most importantly the touches that are new
or have changed for a particular target. The different types of multi-touch events are described in TouchEvent
Class Reference in Safari DOM Additions Reference .
A multi-touch sequence begins when a finger first touches the surface. Other fingers may subsequently touch
the surface, and all fingers may move across the surface. The sequence ends when the last of these fingers is
lifted from the surface. An application receives touch event objects during each phase of any touch.
Handling Events
Handling Multi-Touch Events
2012-09-19 | © 2012 Apple Inc. All Rights Reserved.
74Touch events are similar to mouse events except that you can have simultaneous touches on the screen at
different locations. A touch event object is used to encapsulate all the touches that are currently on the screen.
Each finger is represented by a touch object. The typical properties that you find in a mouse event are in the
touch object, not the touch event object.
Note that a sequence of touch eventsis delivered to the element that received the original touchstart event
regardless of the current location of the touches.
Follow these steps to use multi-touch events in your web application.
1. Register handlers for multi-touch events in HTML as follows:
2. Alternatively, register handlers in JavaScript as follows:
element.addEventListener("touchstart", touchStart, false);
element.addEventListener("touchmove", touchMove, false);
element.addEventListener("touchend", touchEnd, false);
element.addEventListener("touchcancel", touchCancel, false);
3. Respond to multi-touch events by implementing handlers in JavaScript.
For example, implement the touchStart method as follows:
function touchStart(event) {
// Insert your code here
}
4. Optionally, get all touches on a page using the touches property as follows:
var allTouches = event.touches;
Note that you can get all other touches for an event even when the event is triggered by a single touch.
Handling Events
Handling Multi-Touch Events
2012-09-19 | © 2012 Apple Inc. All Rights Reserved.
755. Optionally, get all touches for the target element using the targetTouches property:
var targetTouches = event.targetTouches;
6. Optionally, get all changed touches for this event using the changedTouches property:
var changedTouches = event.changedTouches;
7. Access the Touch object properties—such as the target, identifier, and location in page, client, or screen
coordinates—similar to mouse event properties.
For example, get the number of touches:
event.touches.length
Get a specific touch object at index i:
var touch = event.touches[i];
Finally, get the location in page coordinates for a single-finger event:
var x = event.touches[0].pageX;
var y = event.touches[0].pageY;
You can also combine multi-touch events with CSS visual effectsto enable dragging orsome other user action.
To enable dragging, implement the touchmove event handler to translate the target:
function touchMove(event) {
event.preventDefault();
curX = event.targetTouches[0].pageX - startX;
curY = event.targetTouches[0].pageY - startY;
event.targetTouches[0].target.style.webkitTransform =
'translate(' + curX + 'px, ' + curY + 'px)';
}
Handling Events
Handling Multi-Touch Events
2012-09-19 | © 2012 Apple Inc. All Rights Reserved.
76Typically, you implement multi-touch event handlers to track one or two touches. But you can also use
multi-touch event handlersto identify custom gestures. That is, custom gesturesthat are not already identified
for you by gesture events described in “Handling Gesture Events” (page 77). For example, you can identify a
two-finger tap gesture as follows:
1. Begin gesture if you receive a touchstart event containing two target touches.
2. End gesture if you receive a touchend event with no preceding touchmove events.
Similarly, you can identify a swipe gesture as follows:
1. Begin gesture if you receive a touchstart event containing one target touch.
2. Abort gesture if, at any time, you receive an event with >1 touches.
3. Continue gesture if you receive a touchmove event mostly in the x-direction.
4. Abort gesture if you receive a touchmove event mostly the y-direction.
5. End gesture if you receive a touchend event.
Handling Gesture Events
Multi-touch events can be combined together to form high-level gesture events.
GestureEvent objects are also sent during a multi-touch sequence. Gesture events contain scaling and
rotation information allowing gestures to be combined, if supported by the platform. If not supported, one
gesture ends before another starts. Listen for GestureEvent objects if you want to respond to gestures only,
not processthe low-level TouchEvent objects. The different types of gesture events are described in GestureEvent
Class Reference in Safari DOM Additions Reference .
Follow these steps to use gesture events in your web application.
1. Register handlers for gesture events in HTML:
2. Alternatively, register handlers in JavaScript:
Handling Events
Handling Gesture Events
2012-09-19 | © 2012 Apple Inc. All Rights Reserved.
77element.addEventListener("gesturestart", gestureStart, false);
element.addEventListener("gesturechange", gestureChange, false);
element.addEventListener("gestureend", gestureEnd, false);
3. Respond to gesture events by implementing handlers in JavaScript.
For example, implement the gestureChange method as follows:
function gestureChange(event) {
// Insert your code here
}
4. Get the amount of rotation since the gesture started:
var angle = event.rotation;
The angle is in degrees, where clockwise is positive and counterclockwise is negative.
5. Get the amount scaled since the gesture started:
var scale = event.scale;
The scale is smaller if less than 1.0 and larger if greater than 1.0.
You can combine gesture events with CSS visual effects to enable scaling, rotating, or some other custom user
action. For example, implement the gesturechange event handler to scale and rotate the target as follows:
onGestureChange: function(e) {
e.preventDefault();
e.target.style.webkitTransform =
'scale(' + e.scale + startScale + ') rotate(' + e.rotation + startRotation
+ 'deg)';
}
Handling Events
Handling Gesture Events
2012-09-19 | © 2012 Apple Inc. All Rights Reserved.
78Preventing Default Behavior
iOS Note: The preventDefault method applies to multi-touch and gesture input in iOS 2.0 and
later.
The default behavior of Safari on iOS can interfere with your application’s custom multi-touch and gesture
input. You can disable the default browser behavior by sending the preventDefault message to the event
object.
For example, to preventscrolling on an element in iOS 2.0, implement the touchmove and touchstart event
handlers as follows :
function touchMove(event) {
// Prevent scrolling on this element
event.preventDefault();
...
}
To disable pinch open and pinch close gesturesin iOS 2.0, implement the gesturestart and gesturechange
event handlers as follows:
function gestureChange(event) {
// Disable browser zoom
event.preventDefault();
...
}
Important: The default browser behavior may change in future releases.
Handling Orientation Events
An event is sent when the user changes the orientation of iOS. By handling this event in your web content,
you can determine the current orientation of the device and make layout changes accordingly. For example,
display a simple textual list in portrait orientation and add a column of icons in landscape orientation.
Similar to a resize event, a handler can be added to the element in HTML as follows:
Handling Events
Preventing Default Behavior
2012-09-19 | © 2012 Apple Inc. All Rights Reserved.
79
where updateOrientation is a handler that you implement in JavaScript.
In addition, the window object has an orientation property set to either 0, -90, 90, or 180. For example, if
the user starts with the iPhone in portrait orientation and then changes to landscape orientation by turning
the iPhone to the right, the window’s orientation property is set to -90. If the user instead changes to
landscape by turning the iPhone to the left, the window’s orientation property is set to 90.
Listing 6-3 adds an orientation handler to the body element and implements the updateOrientation
JavaScript method to display the current orientation on the screen. Specifically, when an orientationchange
event occurs, the updateOrientation method isinvoked, which changesthe string displayed by the division
element in the body.
Listing 6-3 Displaying the orientation
Orientation
Supported Events
Be aware of all the events that iOS supports and under what conditions they are generated. Table 6-1 specifies
which events are generated by Safari on iOS and which are generated conditionally depending on the type of
element selected. This table also lists unsupported events.
Handling Events
Supported Events
2012-09-19 | © 2012 Apple Inc. All Rights Reserved.
81iOS Note: Although drag and drop are notsupported, you can produce the same effect using touch
events as described in “Using Touch to Drag Elements” in Safari CSS Visual Effects Guide .
The unload event may not work as expected for back and forward optimization. Use the pageshow
and pagehide events instead.
Table 6-1 Types of events
Event Generated Conditional Available
abort Yes No iOS 1.0 and later.
blur Yes No iOS 1.0 and later.
change Yes No iOS 1.0 and later.
click Yes Yes iOS 1.0 and later.
copy No N/A
cut No N/A
drag No N/A
drop No N/A
focus Yes No iOS 1.0 and later.
gesturestart Yes N/A iOS 2.0 and later.
gesturechange Yes N/A iOS 2.0 and later.
gestureend Yes N/A iOS 2.0 and later.
load Yes No iOS 1.0 and later.
mousemove Yes Yes iOS 1.0 and later.
mousedown Yes Yes iOS 1.0 and later.
mouseup Yes Yes iOS 1.0 and later.
mouseover Yes Yes iOS 1.0 and later.
mouseout Yes Yes iOS 1.0 and later.
orientationchange Yes N/A iOS 1.1.1 and later.
Handling Events
Supported Events
2012-09-19 | © 2012 Apple Inc. All Rights Reserved.
82Event Generated Conditional Available
pagehide Yes No iOS 4.0 and later.
pageshow Yes No iOS 4.0 and later.
paste No N/A
reset Yes No iOS 1.0 and later.
selection No N/A
submit Yes No iOS 1.0 and later.
touchcancel Yes N/A iOS 2.0 and later.
touchend Yes N/A iOS 2.0 and later.
touchmove Yes N/A iOS 2.0 and later.
touchstart Yes N/A iOS 2.0 and later.
unload Yes No iOS 1.0 and later.
Handling Events
Supported Events
2012-09-19 | © 2012 Apple Inc. All Rights Reserved.
83Safari has a new Smart App Banner feature in iOS 6 and later that provides a standardized method of promoting
apps on the App Store from a website, as shown in Figure 7-1 (page 84).
Figure 7-1 A Smart App Banner of the Apple Store app
Note: Smart App Banners only show on iOS, not OS X.
Smart App Banners vastly improve users’ browsing experience compared to other promotional methods. As
banners are implemented in iOS 6, they will provide a consistent look and feel across the web that users will
come to recognize. Users will trust that tapping the banner will take them to the App Store and not a third-party
advertisement. They will appreciate that banners are presented unobtrusively at the top of a webpage, instead
of as a full-screen ad interrupting the web content. And with a large and prominent close button, a banner is
easy for users to dismiss.
If the app is already installed on a user's device, the banner intelligently changes its action, and tapping the
banner will simply open the app. If the user doesn’t have your app on his device, tapping on the banner will
take him to the app’s entry in the App Store. When he returns to your website, a progress bar appears in the
banner, indicating how much longer the download will take to complete. When the app finishes downloading,
the View button changes to an Open button, and tapping the banner will open the app while preserving the
user’s context from your website.
Smart App Banners automatically determine whether the app is supported on the user’s device. If the device
loading the banner does not support your app, or if your app is not available in the user's location, the banner
will not display.
2012-09-19 | © 2012 Apple Inc. All Rights Reserved.
84
Promoting Apps with Smart App BannersImplementing a Smart App Banner on Your Website
To add a Smart App Banner to your website, include the following meta tag in the head of each page where
you’d like the banner to appear:
You can include three comma-separated parameters in the content attribute:
● app-id: (Required.) Your app's unique identifier. To find your app ID from the iTunes Link Maker, type
the name of your app in the Search field, and select the appropriate country and media type. In the results,
find your app and select iPhone App Link in the column on the right. Your app ID is the nine-digit number
in between id and ?mt.
● affiliate-data: (Optional.) Your iTunes affiliate string, if you are an iTunes affiliate. If you are not, find
out more about becoming an iTunes affiliate at http://www.apple.com/itunes/affiliates/.
● app-argument: (Optional.) A URL that provides context to your native app. If you include this, and the
user has your app installed, she can jump from your website to the corresponding position in your iOS
app. Typically, it is beneficial to retain navigational context because:
●
If the user is deep within the navigational hierarchy of your website, you can pass the document’s
entire URL, and then parse it in your app to reroute her to the correct location in your app.
●
If the user performs a search on your website, you can passthe query string so thatshe can seamlessly
continue the search in your app without having to retype her query.
●
If the user isin the midst of creating content, you can passthe session ID to download the web session
state in your app so she can nondestructively resume her work.
You can generate the app-argument of each page dynamically with a server-side script. You can format
it however you'd like, as long as it is a valid URL.
Note: You cannot display Smart App Banners inside of a frame.
Providing Navigational Context to Your App
In your app, implement the application:openURL:sourceApplication:annotation: method in your
app delegate, which fires when your app is launched from a URL. Then provide logic that can interpret the
URL that you pass. The value you set to the app-argument parameter is available as the NSURL url object.
Promoting Apps with Smart App Banners
Implementing a Smart App Banner on Your Website
2012-09-19 | © 2012 Apple Inc. All Rights Reserved.
85The example in Listing 7-1 (page 86) illustrates a website that passes data to a native iOS app. To accomplish
this, detect if the URL contains the string /profile. If it does, then open the profile view controller and pass
the profile ID number that is in the query string.
Listing 7-1 Routing the user to the correct view controller
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
// in this example, the URL from which the user came is
http://example.com/profile/?12345
// determine if the user was viewing a profile
if ([[url path] isEqualToString:@"/profile"]) {
// switch to profile view controller
[self.tabBarController setSelectedViewController:profileViewController];
// pull the profile id number found in the query string
NSString *profileID = [url query];
// pass profileID to profile view controller
[profileViewController loadProfile:profileID];
}
return YES;
}
Promoting Apps with Smart App Banners
Providing Navigational Context to Your App
2012-09-19 | © 2012 Apple Inc. All Rights Reserved.
86A web application is designed to look and behave in a way similar to a native application—for example, it is
scaled to fit the entire screen on iOS. You can tailor your web application for Safari on iOS even further, by
making it appear like a native application when the user adds it to the Home screen. You do this by using
settings for iOS that are ignored by other platforms.
For example, you can specify an icon for your web application used to represent it when added to the Home
screen on iOS, as described in “Specifying a Webpage Icon for Web Clip” (page 87). You can also minimize the
Safari on iOS user interface, as described in “Changing the Status Bar Appearance” (page 89) and “Hiding Safari
User Interface Components” (page 89), when your web application is launched from the Home screen. These
are all optional settings that when added to your web content are ignored by other platforms.
Read “Viewport Settings for Web Applications” (page 55) for how to set the viewport for web applications on
iOS.
Specifying a Webpage Icon for Web Clip
iOS Note: The Web Clip feature is available in iOS 1.1.3 and later. The
apple-touch-icon-precomposed.png filename is available in iOS 2.0 and later. Support for
multiple icons for different device resolutions is available in iOS 4.2 and later.
You may want users to be able to add your web application or webpage link to the Home screen. These links,
represented by an icon, are called Web Clips. Follow these simple steps to specify an icon to represent your
web application or webpage on iOS.
● To specify an icon for the entire website (every page on the website), place an icon file in PNG format in
the root document folder called apple-touch-icon.png or apple-touch-icon-precomposed.png.
If you use apple-touch-icon-precomposed.png as the filename, Safari on iOS won’t add any effects
to the icon.
● To specify an icon for a single webpage or replace the website icon with a webpage-specific icon, add a
link element to the webpage, as in:
2012-09-19 | © 2012 Apple Inc. All Rights Reserved.
87
Configuring Web Applications
In the above example, replace custom_icon.png with your icon filename. If you don’t want Safari on
iOS to add any effectsto the icon, replace apple-touch-icon with apple-touch-icon-precomposed.
● To specify multiple icons for different device resolutions—for example, support both iPhone and iPad
devices—add a sizes attribute to each link element as follows:
The icon that is the most appropriate size for the device is used. If no sizes attribute is set, the element’s
size defaults to 57 x 57.
If there is no icon that matches the recommended size for the device, the smallest icon larger than the
recommended size is used. If there are no icons larger than the recommended size, the largest icon is used. If
multiple icons are suitable, the icon that has the precomposed keyword is used.
If no icons are specified using a link element, the website root directory is searched for icons with the
apple-touch-icon... or apple-touch-icon-precomposed... prefix. For example, if the appropriate
icon size for the device is 57 x 57, the system searches for filenames in the following order:
1. apple-touch-icon-57x57-precomposed.png
2. apple-touch-icon-57x57.png
3. apple-touch-icon-precomposed.png
4. apple-touch-icon.png
See “Custom Icon and Image Creation Guidelines” for webpage icon metrics.
Configuring Web Applications
Specifying a Webpage Icon for Web Clip
2012-09-19 | © 2012 Apple Inc. All Rights Reserved.
88Specifying a Startup Image
iOS Note: Specifying a startup image is available in iOS 3.0 and later.
On iOS,similar to native applications, you can specify a startup image that is displayed while your web application
launches. This is especially useful when your web application is offline. By default, a screenshot of the web
application the last time it was launched is used. To set another startup image, add a link element to the
webpage, as in:
In the above example, replace startup.png with your startup screen filename. On iPhone and iPod touch,
the image must be 320 x 460 pixels and in portrait orientation.
Hiding Safari User Interface Components
On iOS, as part of optimizing your web application, have it use the standalone mode to look more like a native
application. When you use this standalone mode, Safari is not used to display the web content—specifically,
there is no browser URL text field at the top of the screen or button bar at the bottom of the screen. Only a
status bar appears at the top of the screen. Read “Changing the Status Bar Appearance” (page 89) for how to
minimize the status bar.
Set the apple-mobile-web-app-capable meta tag to yes to turn on standalone mode. For example, the
following HTML displays web content using standalone mode.
You can determine whether a webpage is displaying in standalone mode using the
window.navigator.standalone read-only Boolean JavaScript property.
Changing the Status Bar Appearance
If your web application displays in standalone mode like that of a native application, you can minimize the
status bar that is displayed at the top of the screen on iOS. Do so using the status-bar-style meta tag.
Configuring Web Applications
Specifying a Startup Image
2012-09-19 | © 2012 Apple Inc. All Rights Reserved.
89This meta tag has no effect unless you firstspecify standalone mode as described in “Hiding Safari User Interface
Components” (page 89). Then use the status bar style meta tag,
apple-mobile-web-app-status-bar-style, to change the appearance of the status bar depending on
your application needs. For example, if you want to use the entire screen, set the status bar style to translucent
black.
For example, the following HTML sets the background color of the status bar to black:
Configuring Web Applications
Changing the Status Bar Appearance
2012-09-19 | © 2012 Apple Inc. All Rights Reserved.
90Safari supports audio and video viewing in a webpage on the desktop and iOS. You can use audio and video
HTML elements or use the embed element to use the native application for video playback. In either case, you
need to ensure that the video you create is optimized for the platform and different bandwidths.
iOS streams movies and audio using HTTP over EDGE, 3G, and Wi-Fi networks. iOS uses a native application to
play back video even when video is embedded in your webpages. Video automatically expands to the size of
the screen and rotates when the user changes orientation. The controls automatically hide when they are not
in use and appear when the user taps the screen. This is the experience the user expects when viewing all
video on iOS.
Safari on iOS supports a variety of rich media, including QuickTime movies, as described in “Use Supported
iOS Rich Media MIME Types” (page 29). Safari on iOS does not support Flash so don’t bring up JavaScript alerts
that ask usersto download Flash. Also, don’t use JavaScript movie controlsto play back video since iOS supplies
its own controls.
Safari on the desktop supports the same audio and video formats as Safari on iOS. However, if you use the
audio and video HTML elements on the desktop, you can customize the play back controls. See Safari DOM
Additions Reference for more details on the HTMLMediaElement class.
Follow these guidelines to deliver the best web audio and video experience in Safari on any platform:
● Follow current best practices for embedding movies in webpages as described in “Sizing Movies
Appropriately” (page 92), “Don’t Let the Bit Rate Stall Your Movie” (page 92), and “Using Supported Movie
Standards” (page 92).
● Use QuickTime Pro to encode H.264/AAC at appropriate sizes and bit ratesfor EDGE, 3G, and Wi-Fi networks,
as described in “Encoding Video for Wi-Fi, 3G, and EDGE” (page 93).
● Use reference movies so that iOS automatically streams the best version of your content for the current
network connection, as described in “Creating a Reference Movie” (page 94).
● Use posterJPEGs(not poster framesin a movie) to display a preview of your embedded movie in webpages,
as described in “Creating a Poster Image for Movies” (page 94).
● Make sure the HTTP servers hosting your media files support byte-range requests, as described in
“Configuring Your Server” (page 95).
●
If your site has a custom media player, also provide direct links to the media files. iOS users can follow
these links to play those files directly.
2012-09-19 | © 2012 Apple Inc. All Rights Reserved.
91
Creating VideoSizing Movies Appropriately
In landscape orientation on iOS, the screen is 480 x 320 pixels. Users can easily switch the view mode between
scaled-to-fit (letterboxed) and full-screen (centered and cropped). You should use a size that preserves the
aspect ratio of your content and fits within a 480 x 360 rectangle. 480 x 360 is a good choice for 4:3 aspect
ratio content and 480 x 270 is a good choice for widescreen content as it keeps the video sharp in full-screen
view mode. You can also use 640 x 360 or anamorphic 640 x 480 with pixel aspect ratio tagging for widescreen
content.
Don’t Let the Bit Rate Stall Your Movie
When viewing media over the network, the bit rate makes a crucial difference to the playback experience. If
the network cannot keep up with the media bit rate, playback stalls. Encode your media for iOS as described
in “Encoding Video for Wi-Fi, 3G, and EDGE” (page 93) and use a reference movie as described in “Creating a
Reference Movie” (page 94).
Using Supported Movie Standards
The following compression standards are supported:
● H.264 Baseline Profile Level 3.0 video, up to 640 x 480 at 30 fps. Note that B frames are not supported in
the Baseline profile.
● MPEG-4 Part 2 video (Simple Profile)
● AAC-LC audio, up to 48 kHz
Movie files with the extensions .mov, .mp4, .m4v, and .3gp are supported.
Any movies or audio files that can play on iPod play correctly on iPhone.
If you export your movies using QuickTime Pro 7.2, as described in “Encoding Video for Wi-Fi, 3G, and
EDGE” (page 93), then you can be sure that they are optimized to play on iOS.
Creating Video
Sizing Movies Appropriately
2012-09-19 | © 2012 Apple Inc. All Rights Reserved.
92Encoding Video for Wi-Fi, 3G, and EDGE
Because users may be connected to the Internet via wired or wireless technology, using either Wi-Fi, 3G, or
EDGE on iOS, you need to provide alternate media for these different connection speeds. You can use QuickTime
Pro, the QuickTime API, or any Apple applications that provide iOS exporters to encode your video for Wi-Fi,
3G, and EDGE. This section contains specific instructions for exporting video using QuickTime Pro.
Follow these steps to export video using QuickTime Pro 7.2.1 and later:
1. Open your movie using QuickTime Player Pro.
2. Choose File > Export for Web.
A dialog appears.
3. Enter the file name prefix, location of your export, and set of versions to export as shown in Figure 9-1.
Figure 9-1 Export movie panel
4. Click Export.
QuickTime Player Pro saves these versions of your QuickTime movie, along with a reference movie, poster
image, and ReadMe.html file to the specified location. See the ReadMe.html file for instructions on
embedding the generated movie in your webpage, including sample HTML.
Creating Video
Encoding Video for Wi-Fi, 3G, and EDGE
2012-09-19 | © 2012 Apple Inc. All Rights Reserved.
93Creating a Reference Movie
A reference movie contains a list of movie URLs, each of which has a list of tests, as show in Figure 9-2. When
opening the reference movie, a playback device or computer chooses one of the movie URLs by finding the
last one that passes all its tests. Tests can check the capabilities of the device or computer and the speed of
the network connection.
Figure 9-2 Reference movie components
iPhone over EDGE
iPhone over WiFi
Computer desktop
80 kbit
foo-iPhone-cell.3gp
1 Mbit
foo-iPhone.m4v
Main Profile
foo-desktop.m4v
foo-ref.mov
If you use QuickTime Pro 7.2.1 or later to export your movies for iOS, as described in “Encoding Video for Wi-Fi,
3G, and EDGE” (page 93), then you already have a reference movie. Otherwise, you can use the MakeRefMovie
tool to create reference movies. For more information on creating reference movies see Creating Reference
Movies - MakeRefMovie .
Also, refer to the MakeiPhoneRefMovie sample for a command-line tool that creates reference movies.
For more details on reference movies and instructions on how to set them up see “Applications and Examples”
in HTML Scripting Guide for QuickTime .
Creating a Poster Image for Movies
The video is not decoded until the user enters movie playback mode. Consequently, when displaying a webpage
with video, users may see a gray rectangle with a QuickTime logo until they tap the Play button. Therefore,
use a poster JPEG as a preview of your movie. If you use QuickTime Pro 7.2.1 or later to export your movies, as
described in “Encoding Video for Wi-Fi, 3G, and EDGE” (page 93), then a poster image is already created for
you. Otherwise, follow these instructions to set a poster image.
If you are using the
