Mobile WebKit Helpers

The browser on the iPhone/iPod Touch is a mobile version of Apple's Safari (based on WebKit). To make it a "mobile" version, it has some extras that make using it more usable on a small handheld that has phone capabilities.

NOTE the code samples on this page are XHTML. Drop the slash and space if you want to reuse for HTML

Meta

Viewport resizing

<meta name="viewport" content="width=device-width" />

Auto zooms in on your content bounds.

<meta name="viewport" content="width=device-width,user-scalable=no" />

As above, but removes the users ability to double-tap to zoom-in and pinch to resize. This is not recommended as it removes the users expected controls and may make sections on your site unreadable to users will poor eye-sight.

Forms

On text input field you can add the following attributes to the element to change the user interaction:

autocorrect="off"

Turns of typo/spelling corrections.

autocapitalize="off"

Turns off the first letter auto capitalisation.

placeholder="Fill in this field"

Puts in some "hint" text to prompt the user on the type of data you expect them to enter. This data is not submitted if the field is left blank.

Changing the input field type from "text" to "search" will change the submit button to a "Search" button.

Links

Mail

<a href="mailto:username@server.com">Send email</a>

Opens a compose email window in Mail.app

Phone

<a href="tel:5555555555">Make Call</a>

Pre-enters number in Phone.app ready for a call. Error on iPod Touch.

SMS

<a href="sms:6188888888">Send SMS</a>

Opens Text.app with SMS compose to the number. Error on iPod Touch.

YouTube

<a href="http://au.youtube.com/watch?v=YgW7or1TuFk">Watch Video</a>

Opens video on that page in YouTube.app

Maps

<a href="http://maps.google.com/maps?sll=37.0625,-95.677068&sspn=43.983628,42.626953&z=3">View Map</a>

Opens Maps.app showing location.

iTunes (Music Store)

<a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewGenre?id=34">Go to iTunes</a>

Opens iTunes.app showing page. You can get the URL from right-clicking an ITMS page in the desktop version of iTunes.

App Store

<a href="http://www.itunes.com/app/spore">Go to App Store</a>

Opens App Store.app

page_revision: 5, last_edited: 1235093507|%e %b %Y, %H:%M %Z (%O ago)
Unless otherwise stated, the content of this page is licensed under GNU Free Documentation License.