(updated June 27, 2011)
Mobile-specific HTML
Viewport tag
Use the viewport tag to properly fit the content to the screen:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
Tel scheme (to initiate phone calls)
<a href="tel:18005555555">Call us at 1-800-555-5555</a>
Sms scheme (to initiate text messages)
<a href="sms:18005555555"> <a href="sms:18005555555,18005555556"> <!-- multiple recipients --> <a href="sms:18005555555?body=Text%20goes%20here"> <!-- predefined message body -->
Disable automatic telephone number linking
<meta name="format-detection" content="telephone=no">
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!).
<link rel="apple-touch-icon" href="icon.png"/> <link rel="apple-touch-icon-precomposed" href="icon.png"/> <link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" /> <link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" /> <link rel="apple-touch-startup-image" href="startup.png"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" />
Turn off autocorrect, autocomplete, and autocapitalize
And also some handy attributes to turn off annoying autocorrect features:
<input autocorrect="off" autocomplete="off" autocapitalize="off">
Mobile-specific CSS
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: -webkit-overflow-scrolling: touch;
Media queries
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:
@media all and (orientation: portrait) {
body { }
div { }
}
Here’s the same media query using the other method, which points to an external stylesheet (not recommended):
<link rel="stylesheet" media="all and (orientation: portrait)" href="portrait.css" />
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:
// target small screens (mobile devices or small desktop windows)
@media only screen and (max-width: 480px) {
/* CSS goes here */
}
/* high resolution screens */
@media (-webkit-min-device-pixel-ratio: 2),
(min--moz-device-pixel-ratio: 2),
(min-resolution: 300dpi) {
header { background-image: url(header-highres.png); }
}
/* low resolution screens */
@media (-webkit-max-device-pixel-ratio: 1.5),
(max--moz-device-pixel-ratio: 1.5),
(max-resolution: 299dpi) {
header { background-image: url(header-lowres.png); }
}
Read more: Media queries (Mozilla Developer Center)
Miscellaneous CSS
-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.
Mobile-specific JavaScript
window.scrollTo(0,0);
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.
window.matchMedia()
(iOS 5+) Again, just as CSS media queries aren’t specific to mobile, they do come in especially useful for mobile, so it’s worth mentioning their JavaScript counterpart. window.matchMedia() is a JavaScript-based version of media queries. You can use respond.js as a polyfill for devices that don’t support this functionality natively.
navigator.connection
(Android 2.2+) Determine if the phone is running on WiFi, 3G, etc. Example:
if (navigator.connection.type==navigator.connection.WIFI) {
// code for WiFi connections (high-bandwidth)
}
window.devicePixelRatio
Determine screen resolution (analogue to the CSS media query). (iPhone 4 has the value 2, while Nexus One has the value 1.5).
window.navigator.onLine
Not strictly mobile, but helpful for apps to determine if they’re being run offline.
window.navigator.standalone
(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.
<!-- regular file upload (Android 2.2+, NO iOS) --> <input type="file"></input> <!-- opens directly to the camera (Android 3.0+) --> <input type="file" accept="image/*;capture=camera"></input> <!-- opens directly to the camera in video mode (Android 3.0+) --> <input type="file" accept="video/*;capture=camcorder"></input> <!-- opens directly to the audio recorder (Android 3.0+) --> <input type="file" accept="audio/*;capture=microphone"></input>
BlackBerry specific
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).
You also have the option to use PhoneGap, which augments JavaScript and gives you access to more phone features that native apps would have access to.
Use a mobile-optimized JavaScript library
I’ve created a separate entry for the available mobile libraries and frameworks.
Because smartphone browsers are standards-based, the aim of a JavaScript library on mobile is less towards API normalization and more towards providing an actual UI framework, usually to emulate the feel of native apps (and to provide easier workarounds to lack of access to position:fixed). We’ve seen a few libraries released that emulate the iPhone UI, and in the future we might see libraries emulating the Android UI, as well as entirely new UIs.
There’s also a bit to be said about simply loading full desktop JavaScript libraries into mobile clients. In my opinion this doesn’t particularly make sense, especially in a world where latency and bandwidth are so much more of a concern. It doesn’t make sense to force the user wait longer and download code that’s ultimately useless to them (hacks for desktop browsers such as IE 6, etc).
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.
-JavaScript: strict mode, constants, block scope, Date.now(), etc.
Slides
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 5: Using mobile-specific HTML, CSS, and JavaScript
Part 6: Dealing with device orientation
Part 7: Mobile JavaScript libraries and frameworks
[...] in screen size and browser support via CSS or jQuery, and he includes his own downloadable examples.Dave Calhoun has some excellent suggestions in his series on mobile web development.4. Change Your User Agent in [...]
Hi David,
Nice collection of current mobile topics and links. Thanks for the post.
[...] in screen size and browser support via CSS or jQuery, and he includes his own downloadable examples.Dave Calhoun has some excellent suggestions in his series on mobile web development.4. Change Your User Agent in [...]
At first, this sounded weird, but on second thought it actually makes sense… rotating the device doesn’t change the dimensions of any of the elements, just the zoom level, so it can be done with a repaint rather than a reflow. It might be annoying, but rendering can be costly on slower mobile devices, so they are actually optimizing the interaction. Did you check if the JS trigger for a page reflow was any slower than a normal screen rotation? I’d be curious to see that data.
@Nicole Ah, actually I just figured it out. Your comment led me to more research which leads me to believe my initial thoughts were wrong. Actually, it seems that a reflow does occur on screen rotation. It’s actually not zooming (at least on iPhone), but actually creating more space and reflowing elements appropriately.
The part that got me messed up was the missing piece.. actually body[orient='portrait'] doesn’t exist without the help of JS, which adds this ‘orient’ attribute to the body element when the screen is rotated. The problem is that this is applied AFTER the screen rotation and reflow, and changing that attribute doesn’t trigger a reflow. At first I thought this was a bug, but it makes sense.. the browser should only reflow if this attribute is class/width/height, but ‘orient’ is just a made-up attribute that shouldn’t necessarily affect CSS.
Anyhow, thanks for pushing me to investigate this further. I’ll make an updated post with this info!
I was looking for how to scale the size of the page in a mobile web browser forever. Thanks for publishing these developer resources for mobile devices. At the moment it’s hard to find such good mobile device code.
[...] Dave Calhoun has some excellent suggestions in his series on mobile web development. [...]
[...] Not all browsers support media queries, so they may not be an option for you, but if you're targeting smartphones with WebKit-based browsers you should be fine. In general, the approach of first designing your app [...]
When developing for the iPhone or iPad, it’s sometimes difficult to test your solution. The iPhone Developer mode doesn’t give you quite enough.
That’s why I developed addTouch. It’s a multitouch emulator, that lets you use Firebug or Google Chrome Developer Tools to debug your touch-enabled web app. Give it a try:
http://j.mp/fVFE5C
I want to looking for mobile web site support with smartphone device or xhtml device. Thank you for your post.
I’m just getting started with learning Android development, starting with HTML5 in the Android browser, and soon will be porting to PhoneGap. Your blog here was extremely useful to me, confirming some things that I was confused about, such as seeing a “tap” event in jQTouch but then wondering why it wasn’t being picked up on the Android. This is because it’s an iOS thing, not an Android thing. And then on your site I found the workaround with the “touch*” events. The docs elsewhere on the web are hard to follow, so it was nice to see your stuff here. Thanks for spending the time — meant a lot to me.
I’m trying to avoid using jQTouch. I want to go my own way, learning how jQTouch does things and implement it my own way. Just picky that way, I guess. Sames goes with SenchaTouch.
[...] Using mobile-specific HTML, CSS, and JavaScript (Mobile web part 5) | David B. Calhoun – Devel… it's a whole new jungle! same vegetation, different [...]
[...] Mobile Specific – David B Calhoun [...]
This is a great list — for completeness you might include the “precomposed” version of the apple-touch-icon.
[...] Update: Just found this great article by David B. Calhoun “Using mobile-specific HTML, CSS and Javascript”, written mid 2010. Source » [...]
Sweet site, super design and style , really clean and utilize genial .
[...] Mobile Specific – David B Calhoun [...]
[...] Using mobile-specific HTML, CSS, and JavaScript (Mobile web part 5) | David B. Calhoun – Developer… [...]
[...] Using mobile-specific HTML, CSS, and JavaScript (Mobile web part 5) | David B. Calhoun – Developer… VN:F [1.9.8_1114]please wait…Rating: 0.0/10 (0 votes cast)VN:F [1.9.8_1114]Rating: 0 (from 0 votes) [...]
[...] Using mobile-specific HTML, CSS, and JavaScript (Mobile web part 5) | David B. Calhoun – Developer… [...]
Strange. Your “copy to clipboard” does not seem to work on my Linux OS. Firefox 3.5 here, Slackware Linux 13.1.
[...] 14, 2004 mobile devices without changing the underlying HTML Are we talking about HTML or XHTML?Using mobile-specific HTML, CSS, and JavaScript (Mobile web part 5 .Jun 29, 2010 Mobile-specific HTML. Use the viewport tag to properly fit the content to the [...]
Wow, great tips, very useful. Thanks for a helpful, to-the-point post!
@Henry Gilbert, I think your first problem is probably using an OS called “Slackware”… i mean how many actual users are going to be on the OS? 80/20 rule anyone? just sayin’…
Very helpful!
Do you know of any JS event that can be listened to when the user taps the status bar and the viewport is immediately scrolled to the top of the page?
Thanks!
@Timbo The scroll event should fire, so you can attach that event to the document and check when window.pageYOffset is 0. Remember that the scroll event is really intensive, firing for essentially every pixel moved, so don’t forget to put it in a timeout so the whole UI doesn’t freeze up.
Thanks for this great summup, didn’t know that android was that ahead of the rest on the mobile internet platform.
Does the capture=camera work in any devices yet. Have tried this on a form and it does not opn the camer but instead behaves like normal file upload .
Exactly what is the purpose of “%BLOGTITLE” ?
this is not working
Is there any way to get SMS to work with message text? Thanks.
Thank you very much David.
All your mobile articles have been very helpful to me.
[...] Using mobile-specific HTML, CSS, and JavaScript (Mobile web part .Jun 29, 2010 Mobile-specific HTML. Viewport tag. Use the viewport tag to properly fit the content to the screen: [...]
[...] Using mobile-specific HTML, CSS, and JavaScript (Mobile web part .Jun 29, 2010 Media queries themselves are actually quite old and are not mobile specific (they used to be popular [...]
[...] Part 5: Using mobile-specific HTML, CSS, and JavaScript [...]
Thanks for the great post and helpful tips. I know I’m late to the party on this one, but I’ve been trying to develop a website for iPhone, the designer has created the template to be 960px wide (it’s going to be landscape only), at 72dpi. But if I create an image that’s 960px wide, it’s too big on the iPhone 4. If I resize the image to 480px, it fits just fine, but looks blurry. Getting so frustrated trying to wrap my head around what size images should be.
It’s not a fluid design, so it’ll be a static 960×536, no zooming. Seems like not matter what I do with ratio, etc, the graphics are always too big until I resize them and lose that quality.
Any tips would be appreciated. Thank you!
Other tips : -webkit-appearance : none; for submit button