Targeting a specific mobile device in a web application – that is , writing code inside a web application to optimize the experience for specific devices – can be relatively straightforward or very difficult, depending on how you approach it. The trouble is, it’s often misunderstood, especially if you come from a desktop-web development background. Like much of software development, it all comes down to context. The issues web developers face on the desktop are in a different context than those faced on mobile platforms.
On the Desktop
When we target a browser on the desktop, what we care about most is its rendering engine. We want to know what browser the user is using, so that we can provide the proper styles and mark-up to make our content look its best.
This is why we started using tricks to detect the browser. Are we dealing with Internet Explorer 6? Great — let’s swap out all those transparent .png images and use transparent .gifs. Are we displaying in a webkit-based browser? Fantastic — let’s add some CSS3 gradients.
The goal is to get an accurate picture of the rendering engine, and tailor our content to that picture. We used to do this with CSS hacks, then moved on to user-agent detection, and finally conditional comments. This is still a useful tactic today for degrading gracefully for browsers that are falling behind the times, and enhancing progressively for browsers on the cutting edge.
Our first instinct might be to just duplicate what we did in the desktop world. In particular, it’s easy to “just detect the user-agent”, and there are ways to do this.
But wait! Is this really the same problem?
While we were after the rendering agent in the desktop world, that’s of little value to us on mobile devices. They all have significant support for HTML5 and CSS3. Is there any value in knowing whether the highly-compatible browser you’ve detected is running on an iOS device or an Android device? Not really.
What we’re after on mobile devices are the screen properties. We want to know things like how big it is, and whether its portrait or landscape. We want our content to be tailored for the specific outputs of the device.
Enter Media Queries
Mobile web development requires a different approach than desktop web development. Why go digging for the user agent if we don’t care about the rendering engine? There’s a better, more direct, solution available in most mobile browsers.
Using CSS3 Media Queries, we can write CSS that targets specific device properties. Media Queries can tell us whether the device is in landscape or portrait mode, and give us the dimensions of not only the screen’s resolution, but also its physical size. This is useful, and exactly what we need.
With most mobile browsers supporting HTML 5 and CSS3, we no longer have to worry as much with what the browser rendering engine supports to provide the most optimum user experience. In mobile web development, it’s more important to focus on screen size and orientation. Check out CSS3’s Media Queries to better target your Web apps.