Examples
Many thanks to the members of the iPhoneWebDev community for working out solutions to common problems and providing these examples.
Viewport
Show/Hide
iPhone Optimized View Source Bookmarklet
Show/Hide
View Source bookmarklet.
Based on original code by Abe Fettig, adapted to set scale parameters and scroll down to lose the location bar.
The unencoded javascript looks like this:
var sourceWindow = window.open("about:blank"); var newDoc = sourceWindow.document; newDoc.open(); newDoc.write("<html><head><title>Source of " + document.location.href + "</title><meta name=\"viewport\" id=\"viewport\" content=\"initial-scale=1.0;" + "user-scalable=0; maximum-scale=0.6667; width=480\"/><script>function do_onload()" + "{setTimeout(function(){window.scrollTo(0,1);},100);}if(navigator.userAgent.indexOf" + "(\"iPhone\")!=-1)window.onload=do_onload;</script></head><body></body></html>"); newDoc.close(); var pre = newDoc.body.appendChild(newDoc.createElement("pre")); pre.appendChild(newDoc.createTextNode(document.documentElement.innerHTML));
Selecting Different Keypads
Show/Hide
The iPhone automatically starts out with a telephone keypad if the input field has phone anywhere in its name, or with the keyboard in numeric mode if the input field has zip anywhere in its name. You can test it here. Original test page created by Ronan.
Changing CSS After Orientation Change
Show/Hide
Two examples of “sensing” the orientation of the iPhone when it switches between portrait and landscape mode, currently using polling. This (“liquification”) is based on Joe Hewitt's “Liquid Layout” and (“gradient menus”) on Timothy Hatcher's gradient menus: liquified (no gradients); liquified (with gradients)
Emulating a Native iPhone-Style App
Show/Hide
This example from Joe Hewitt shows how to use simple HTML to emulate an iPhone-style application, which also supports the back button for navigation.
iLace: A Simple iPhone Chat
A complete chat application.
Onload hiding of the URL bar
A simple example of hiding the URL bar on page load.
mailto with arguments
A confirmation that mailto: with e.g. subject setting works.
iPhone user detection
Example which determines if the visitor is on an iPhone or not.
Events on the iPhone
A list of events supported by the iPhone (work in progress!).
Fonts on the iPhone
A list of fonts available on the iPhone.
iPhone settings
A list of settings available to the iPhone user.
Bugs
A comprehensive list of known iPhone bugs.
Tooltips
A demonstration of the differences in behavior for tooltips on iPhones vs browsers.
Compression
Compressed (gzip) pages over HTTP for optimized load time.