Macadamian Blog

Detecting Mobile Browser Properties with CSS3 Media Queries

Macadamian Technologies

How to use a new feature of CSS3 to detect device properties and better tailor your mobile web apps to specific devices.

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.

In Mobile

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.

Author Overview

Macadamian Technologies

Macadamian is a full-service software design and development firm. Working with today's leading technology companies, Macadamian creates inspiring software that enriches lives through meaningful and compelling user experiences for mobile, web and desktop applications. Driven by user-centered insights, strategy and design, Macadamian delivers transformational products across multiple sectors including the healthcare, telecommunications, mobility, enterprise, and consumer markets. Whether collaborating on an end-to-end project or filling specific gaps, partnering with Macadamian’s inventors gives you immediate access to software engineering services, design services, and broad domain expertise in mobility, VoIP, SaaS, web and desktop applications, HTML5, iOS, Android and more.