(updated June 27, 2011)
Use the viewport tag to properly fit the content to the screen:
Tel scheme (to initiate phone calls)
Sms scheme (to initiate text messages)
1 2 3
Disable automatic telephone number linking
iOS-specific HTML (some work on Android as well)
You also have access to several Apple-specific tags to use in your iOS applications (iPhone, iPad, and don’t forget the iPod Touch!).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
Turn off autocorrect, autocomplete, and autocapitalize
And also some handy attributes to turn off annoying autocorrect features:
position:fixed and overflow:scroll
Mobile browsers are now starting to support these basic CSS properties better. Position:fixed will work on Android 2.2+ and iOS 5+. Overflow:scroll works with one finger on iOS 5+.
Also, iOS 5 has additional CSS to give the native scrollbar and momentum/intertia to elements with overflow:scroll:
1 2 3
Media queries enable you to target specific features (screen width, orientation, resolution) within CSS itself. Media queries themselves are actually quite old and are not mobile specific (they used to be popular for making a print-friendly version of webpages).
You can use them two ways: 1) inline in a CSS stylesheet or 2) as the “media” attribute in the link tag, which loads an external stylesheet. The following is an example of inline CSS that’s applied only when the device is in portrait mode:
1 2 3 4
Here’s the same media query using the other method, which points to an external stylesheet (not recommended):
This is not recommended because it creates an additional HTTP request (bad for performance). Also, in the case of screen orientation, the separate CSS stylesheet is NOT downloaded when the screen is rotated.
Here’s a few examples of using inline CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
Read more: Media queries (Mozilla Developer Center)
-webkit-tap-highlight-color(iOS): override the semitransparent color overlay when a user clicks a link or clickable element. To completely disable it, set the value to ‘transparent’ or ‘rgba(0,0,0,0)’
-webkit-user-select: none;- prevent the user from selecting text (also works on desktop WebKit)
-webkit-touch-callout: none;- prevent the callout toolbar from appearing when a user touches and holds an element such as an anchor tag.
This hides the address bar and takes advantage of the entire device screen. You’ll have to set this in a timeout and make sure to get the timing right. See Remy Sharp’s post for more details.
(Android 2.2+) Determine if the phone is running on WiFi, 3G, etc. Example:
1 2 3
Determine screen resolution (analogue to the CSS media query). (iPhone 4 has the value 2, while Nexus One has the value 1.5).
Not strictly mobile, but helpful for apps to determine if they’re being run offline.
(iOS 2.1+): determine if it’s running in full-screen mode
Touch and gesture events
touch events (iOS, Android 2.2+): touchstart, touchmove, touchend, touchcancel
gesture events (Apple only, iOS 2+): gesturestart, gesturechange, gesturend give access to predefined gestures (rotation, scale, position)
Screen orientation (every 90 degrees)
- orientationchange event: triggered every 90 degrees of rotation (portrait and landscape modes). The current orientation is available through window.orientation
Device orientation (more fine-grained)
The deviceorientation event will fire very frequently, and gives more fine-grained information about the device’s orientation in three dimensions.
MozOrientation (or onmozorientation?) (Fennec/Firefox Mobile, Firefox 3.5+): also not strictly mobile. Gives access to the device’s accelerometer (x-y-z orientation data), updated periodically. Works on Android phones running Mobile Firefox. On the desktop this works with laptops such as Thinkpads and MacBooks.
devicemotion (shake gestures, etc.)
- devicemotion fires when the user shakes or moves their device. Devicemotion taps into the accelerometer, which is fires off when the device accelerates. Contrast this with the deviceorientation event, which taps into the device’s gyroscope (if it has one), which only measures the 3D angle orientation, even when the device is at rest.
Media capture API
While iOS is still lacking basic file inputs, Android is forging ahead, giving developers fine-grained control over content users can upload.
1 2 3 4 5 6 7 8 9 10 11
If you’re developing for a BlackBerry Widget, you have access to proprietary information through the blackberry object (which gives access to useful information such as blackberry.network [returns values such as CDMA and Wi-Fi] and blackberry.system).
Take advantage of new stuff!
While not specific to mobile, there’s a lot of new stuff in general that you can use. If you limit yourself to the top smartphones (iPhone, Android, and maybe webOS), compared to the desktop you immediately have access to an even wider array of new stuff, especially many Webkit proprietary features, since most of these top smartphones have browsers based on Webkit.
-HTML: new tags (HTML5 (I’m sure you’ve heard of it by now…))
-CSS: 2d transforms, 3d transforms, animation, border radius, custom fonts with @font-face, etc.
More from the Mobile Web series:
Part 1: The viewport metatag
Part 2: The mobile developer’s toolkit
Part 3: Designing buttons that don’t suck
Part 4: On designing a mobile webpage
Part 6: Dealing with device orientation