HTML and CSS Reference
Listing 2-4. Using Media Queries for Pixel Density-Specific Styling
// Set the viewport to match the devices pixen density and width
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width"
// Pull in the main stylesheet
<link rel="stylesheet" media="screen" href="mobile.css" />
// Pull in high, medium, and low stylesheets to provide pixel density
// specific images
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)"
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)"
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 0.75)"
As you can see in Listing 2-4, the pixel ratios for each category of display are as
We use a generic mobile stylesheet so that we can provide fallback images just
in case a device doesn't match any of the pixel ratios. We then use the
stylesheets for each pixel density category to override the images.
Pixel density can be a pain, as it means that for every image that you use within
your application, you must produce two more in varying sizes. It also means that
even if you create graphics for the highest pixel density available today,
tomorrow you will probably have to re-export everything for another display with
a much higher pixel density. Be sure to bear this in mind when choosing
graphics packages to create your mobile web designs.
Catering to Your Audience
It is as important to remember whom you are writing your application for just as
much as what they will be using to interact with your work. The first step is
ensuring that you understand what your users will be doing with your
application. To do so, you must categorize it.
Categorizing your application will help you to formulate general interaction rules
based on how other applications within your category are designed and what