Prepare a Separate Android Stylesheet

Prepare a Separate Android Stylesheet

I’m as DRY as the next guy, but in the real world you’re better off making a clean break
between your desktop browser stylesheet and your Android stylesheet. Take my word
for it and just make two completely independent files; you’ll sleep better. The alternative
is to wedge all of your CSS rules into a single stylesheet, which is a bad idea for a
number of reasons, the most obvious of which is that you’d be sending a bunch of
irrelevant desktop style rules to the phone, which is a waste of precious bandwidth and
memory.
DRY stands for “don’t repeat yourself,” and is a software development
principle that states, “Every piece of knowledge must have a single, unambiguous,
authoritative representation within a system.” The term
was coined by Andrew Hunt and David Thomas in their book The
Pragmatic Programmer (Addison-Wesley Professional).
To specify a stylesheet specifically for Android, replace the stylesheet link tag in the
sample HTML document with ones that use the following expressions:
<link rel="stylesheet" type="text/css"
href="android.css" media="only screen and (max-width: 480px)" />
<link rel="stylesheet" type="text/css"
href="desktop.css" media="screen and (min-width: 481px)" />


I specifically used max-width and min-width here so that you can resize
your desktop browser and see the mobile version of the page. If you
would prefer to serve the desktop.css stylesheet to desktop users regardless
of their browser window size, use max-device-width and mindevice-
width instead.
The Wireless Universal Resource File (WURFL) contains information
you can use to identify a huge number of wireless devices, including
Android devices. If you need to detect Android devices with a width
greater than 480px (such as a tablet) or if you don’t want the mobile
version of the site to appear when users resize their browser window
below 480px, you can use WURFL’s PHP API to precisely detect specific
browsers. See the Appendix for more information on WURFL.
Here, desktop.css refers to your existing desktop stylesheet, and android.css is a new file
that we’ll be discussing in detail in a bit. The desktop.css file is not essential, but you
can use the stylesheet from the previous chapter if you’d like.
If you’re following along using the sample HTML document shown in
Example 2-1, you’ll need to rename screen.css to desktop.css, but since
we’re focused on the Android stylesheet, you can ignore the desktop
stylesheet completely. If it fails to load, your browser won’t get too
upset.
However, if you’d like to use Chrome to test the Android-optimized
version of the site, you should replace the reference to desktop.css with
a reference to android.css. That way, you’ll get to run the Android version
of your site whether you load it from a phone or the desktop
browser.
Regrettably, Internet Explorer will not understand these expressions, so we have to add
a conditional comment (shown in bold) that links to the desktop version of the CSS:
<link rel="stylesheet" type="text/css"
href="android.css" media="only screen and (max-width: 480px)" />
<link rel="stylesheet" type="text/css"
href="desktop.css" media="screen and (min-width: 481px)" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="explorer.css" media="all" />
<![endif]-->
So now it’s time to edit the HTML document (if you haven’t already done that as you
were following along): delete the existing link to the screen.css file, and replace it with
the lines just shown. This way, you will have a clean slate for the Android-specific CSS
in this chapter.

Control the Page Scaling

Unless you tell it otherwise, the Android browser will assume your page is 980px wide
(Figure 2-3). In the majority of cases, this works great. However, you are going to format
the content specifically for the smaller dimensions of the Android phone, so you must
let the mobile browser know about it by adding a viewport meta tag to the head element
of the HTML document:
<meta name="viewport" content="user-scalable=no, width=device-width" />
Desktop browsers will ignore the viewport meta tag, so you can include
it without worrying about the desktop version of your site.


Merely by suppressing the desktop stylesheet and configuring your viewport, you will
have already given your Android users an enhanced experience (Figure 2-4). To really
impress them, let’s start building the android.css stylesheet.


If you don’t set the viewport width, the page will be zoomed out when
it first loads. It’s tough to say exactly what the zoom level will be because
the Android browser includes a setting that allows users to set the default
zoom. The options are Far, Medium (the default), or Close. Even
if you do set the viewport width, these user-defined settings will affect
the zoom level of your app.