HTML and CSS Reference
In-Depth Information
Different pixel density
When you're creating Web pages for output ranging from large desktops to mobile devices, you
have to consider more than just the number of pixels on the vertical and horizontal planes. In the
example CSS3 external style sheet, the width is set to 480 with the code
max-width:480px;
for
an iPhone with 480-pixel horizontal resolution. However, when you run the application on your
mobile device, the text may be way too big or way too small. What's going on?
We tend to think of screen resolution in terms of the number of pixels — the more pixels, the higher
the resolution. So, if you set your screen to 1680 x 1050, it has a higher resolution than if I set it to
1024 x 768. However, the resolution actually depends on the number of pixels relative to the size of
the display area. More important than the number of pixels is the number of pixels stuffed into your
viewing area or pixels per inch (PPI) — pixel density. If you develop your Web page on a typical
computer screen, the pixel density is around 100. However, your mobile device is likely to have a
much higher pixel density. For example, my iPhone 3GS has a pixel density of 132 and a resolution
of 480 x 320. If I upgrade to an iPhone 4, my pixel density will be 326 and the resolution will be
960 x 640. However, the phones both have a 3
1
⁄
2
-inch viewing area. The iPhone 4's resolution is
double that of the iPhone 3GS, and its ppi is about 2
1
⁄
2
times greater. For my Web page, that means
a width setting of 480 will show up as coming only about halfway on an iPhone 4 even though it fi lls
the width of iPhone 3GS models.
However, because I do my development on a computer with a ppi of 99 on a 20-inch screen, the best
I can get is an estimation of what it will look like on any mobile device. I can estimate what a Web
page will look like on different mobile devices by changing the size of the browser window, but
ultimately, you need to actually see what your HTML5 Web page looks like on the target mobile
device.
58
A unique feature of many mobile devices is that they allow Web pages to be viewed from
dif erent aspects — vertical or horizontal. So, when I'm preparing a CSS3 i le for a mobile
device, I tend to set the width to the horizontal. However, you'll quickly i nd that dif erent
mobile browsers work dif erently. At the time of this writing, the Apple Safari browser on the
iPhone displayed the page in a tiny, unreadable page that had to be expanded, but the Opera
Mini browser (as shown in Figures 3-9 and 3-10) on the same iPhone using the same size
screen displayed the page immediately in an optimum viewing size, whether viewed horizon-
tally or vertically.
Inline style
A third way to add CSS3 to your document is to simply add a
style
attribute to an element
that redei nes the content in the element's container. For example, the following code
(
InlineCSS3.html
in this chapter's folder at
www.wiley.com/go/smashinghtml5
)
has style changes in the
<div>
container and the second
<p>
container:
<!
DOCTYPE HTML
>
<
html
>
<
head
>
<
meta http
-
equiv
=
”Content-Type”
content
=
”text/html; charset=UTF-8”
>
