HTML and CSS Reference
In-Depth Information
Pixel density is a concept that allows mobile devices with the same physically
sized screens, to vary in resolution due to the number of pixels available per
square inch.
Android devices are divided into three categories of pixel density:
Low
Medium
High
How does this affect your mobile web application? When you produce images
for a normal web site, you produce a single image that will not scale and work
across all screen types, as the layout will scale with the image itself to fit a fixed
width or elastic layout.
For the mobile web, you will generally create a mobile application to fit the entire
viewport and have the same dimensions regardless of what the device's pixel
density may be.
For instance, if you make an image 500 px wide for a low pixel density screen, it
will appear smaller on a high-density screen. This is because 500 px will not
occupy as much space on the high-density screen as it does on the low-density
screen.
The solution to this for mobile browsers is to scale images up or down,
depending on the target density. For instance, if you develop your application
for a medium-density screen, the browser will scale the image down for low-
density screens and up for high-density screens. This causes an overhead when
scaling the images either way, and pixelation when scaling the image up and
potential distortion when scaling the image down.
To get around this, we can both create our applications exclusively for high-
density screens, and allow the mobile to scale images down. This can be very
expensive in terms of CPU/GPU and network activity. Both of these factors can
have an impact on rendering time and potentially the user's pocket with
unnecessary assets being downloaded. Or we can use media queries to ensure
that the correct content gets delivered for the correct type of display. In order to
do this, you must set the
target-densitydpi
property of the
viewport
meta tag
to
device-dpi
and import pixel density--specific stylesheets using media
queries, as shown in Listing 2-4.
