Cutting Edge Device Targeting with CSS3 Media Queries

Do you remember when browsers each incorporated their own proprietary standards? This was when Netscape Navigator was at war with Internet Explorer for Internet supremacy. Developers, who were left having to design their sites for both browsers, would tell themselves that in time, Web standards would emerge and bring an end to the duality. Those were good times. Today, any progress made in the realm of standardization has been completely eclipsed by the rise of the mobile device. Competition in this new segment has been so fierce that there isn’t a week that goes by that we don’t hear about some new feature. Inevitably, these require additional consideration when designing web pages. In last month’s Targeting Specific Devices in your Style Sheets article, I set the stage for targeting different mobile devices using CSS3 Media Queries properties such as max-device-width and orientation. In today’s follow-up, I’d like to provide a more complete outline of what we’re up against, and how to strategically apply our CSS3 Media Queries to give us the very best chance at layout mastery.

Aspect Ratios and Resolutions

I don’t want to scare anyone away, but here is a summary of the most common mobile device screen aspect ratios and resolutions:

I think that a designer would have to be slightly nuts to try to target every one of the above combinations. The key to keeping one’s sanity is to separate layouts by general sizing and resolutions, such as small, medium, and large screens as well as normal, medium, and high resolutions. There’s a good CSS example at the end of this tutorial that also takes screen orientation into account. (more on that in a bit)

Working with High Resolution Displays

The 4g iPhone introduced high density resolution in its retina display. In order to avoid breaking the Web, it reports itself as 320×480, just like the lower-resolution iPhones and iPods of the previous generation. With a pixel density of twice that of older displays, you should provide images that are twice as large or else everything will look “blocky”. Rather than rely on device-height or device-width, you have to use the proprietary -webkit-min-device-pixel-ratio attribute to target the 4g.

@media only screen and (-webkit-min-device-pixel-ratio: 2) {    
/* iPhone 4g styles go here */ 
} 

Other mobile devices – namely Android ones – also boast higher-than-normal resolution rates. These can be handled by a variety of -webkit-min-device-pixel-ratio rules as follows:

/* 1.25 dpr */
@media 
(-webkit-min-device-pixel-ratio: 1.25), 
(min-resolution: 120dpi){ 
    /* Retina-specific stuff here */
}

/* 1.3 dpr */
@media 
(-webkit-min-device-pixel-ratio: 1.3), 
(min-resolution: 124.8dpi){ 
    /* Retina-specific stuff here */
}

/* 1.5 dpr */
@media 
(-webkit-min-device-pixel-ratio: 1.5), 
(min-resolution: 144dpi){ 
    /* Retina-specific stuff here */
}

Accommodating Portrait and Landscape Orientation

It only makes sense to alter your CSS for landscape orientation because of its greater width. One of the most challenging things about styling content for mobile devices is their obscenely narrow widths. But that’s only an issue in portrait orientation; change it to landscape, and a whole range of possibilities opens up. Here are some rules to handle those:

/* Smartphones (portrait and landscape) --  --  --  --  -- - */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 
/* Styles */ 

} 

/* Smartphones (landscape) --  --  --  --  -- - */ 
@media only screen 
and (min-width : 321px) { 
/* Styles */ 

} 

/* Smartphones (portrait) --  --  --  --  -- - */ 
@media only screen 
and (max-width : 320px) { 
/* Styles */ 

} 
  
/* iPads (portrait and landscape) --  --  --  --  -- - */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) { 
/* Styles */ 

} 

/* iPads (landscape) --  --  --  --  -- - */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
/* Styles */ 

} 

/* iPads (portrait) --  --  --  --  -- - */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
/* Styles */ 

} 

/* Desktops and laptops --  --  --  --  -- - */ 
@media only screen 
and (min-width : 1224px) { 
/* Styles */ 

} 

/* Large screens --  --  --  --  -- - */ 
@media only screen 
and (min-width : 1824px) { 
/* Styles */ 

} 

Don’t Forget Microsoft

You didn’t think that the introduction of Windows Phone 7 (WP7) would mark Microsoft’s foray into the world of standards compliance did you? WP7’s media queries support is sadly limited. As such, selector attributes like initial-scale, maximum-scale, and minimum-scale are off limits. Moreover, for some reason, every WP7 device reports itself as 320px wide.

So what’s the answer? CSS conditional comments, just like always! Here’s some code that you can add to your document to target Windows Phone 7:

<! -- [if IEMobile 7]>    
  <link rel="stylesheet" type="text/css" href="mobile.css"  href="iemobile.css" media="screen"  />
<![endif] -- > 

Conclusion

So that’s the state of device targeting with CSS3 media queries. Does it seem a little convoluted to you? It could be simpler for sure, and I fear that it’s liable to worse before it gets better. Looking at the bright side, this explosion of web-enabled devices can only mean a long career for us Web designers and developers.