What are the iphone/android specific Web features?

Question

I'm trying to list Web features (HTML, CSS, Javascript, APIs) that can be used for mobile web pages, things we don't usually use on Desktop browsers.

So far, I have:

• geolocation
• orientation
• viewport (width, scale)
• touch-events
• tap-highlight-color
• map and youtube links open in a dedicated app
• tel: links support
• specific keyboard layout depending on the form (type=number, email, ...)

What do I miss here?

The question would be: "If I am a Desktop Web developer, what should I consider to build a mobile version of my website?"

Answer 1

Actually, a lot of these are already in the HTML5 standard. They are not, in fact, Android/iPhone specific.

For example, the following are part of the HTML5 spec:

• Geolocation: already implemented in Gecko (Firefox) and Webkit (Safari/Chrome)
• Viewport: accessible using Javascript
• Number/email/phone number-specific fields: implemented in part by several browsers

Your major concern when dealing with mobile versions of your site (assuming you mean touch-enabled smartphone) is the size of your icons/buttons/text/controls/etc. Anything else, including multi-touch, is simply an extra.

As for other extras, you could consider using something like JQTouch (http://www.jqtouch.com/) to provide a more "native" look and feel on the mobile client. JQTouch provides things like native animations, AJAX interface, specialized buttons/toggles/text fields, and themes that make iPhone web apps look better. It should also work on Android, since its browser is also based on Webkit.

For more information on iPhone/Android web frameworks, see http://distractable.net/coding/iphone-android-web-application-frameworks/.