The viewport. You start off with the viewport --a concept invented by the W3C, but one that garnered little attention until the iPhone came along. In the chart on the first page in this article, you'll notice that before the iPad and iPhone 4, Apple's devices were all 320 pixels wide. However, on those devices, Mobile Safari thought that it had a width of 960 pixels. That meant that internally, your site was compressed to a third the width, and then put out on the screen. Want to change that equation? That's the viewport.
<meta name = "viewport" content = "width = device-width" />That line goes into the head section of your HTML and tells mobile browsers that you may think your width is 960, but I think you should be satisfied with 320 pixels across -- or whatever the device-width happens to be.
At least that's the way Apple described how it should work; in practice, I've had better luck giving the viewport a fixed width:
<meta name = "viewport" content = "width = 560" />This is one of those gray areas where there's no one right answer that fits all sites on all devices; you need to play with it to find what width works best for your site.
Media queries. Next up is a little bit of custom CSS geared toward the mobile crowd.
<link rel="stylesheet" href="mobile.css" type="text/css" media="only screen and (max-device-width:1024px)" />The first part of the link tag looks like a straightforward style sheet, up until the end. The media attribute is how you can identify not just mobile browsers in general, but which mobile browsers in particular. The only screen keywords are the voodoo that tells mobile browsers that this is just for them. After that, you can get picky about which browsers, but here you're looking for all mobile devices that have a maximum device width of 1,024 pixels -- that is, everything up to and including an iPad. Because of this line, every mobile device will load mobile.css.
Now, you can get a little more particular:
<link rel="stylesheet" href="mobile2.css" type="text/css" media="only screen and (-webkit-min-device-pixel-ratio:2)" />This starts off similar to the earlier broad media query, but then looks at the minimum pixel ratio of the device. If it isn't 2 or higher, you aren't interested. Right now, the only browser fitting that description is the iPhone 4 with its Retina display. This line lets you tweak details a little for Apple's latest toy, which gets to use mobile2.css.
For the next line, it helps to remember that these devices can be in horizontal or vertical orientation when your page loads. You can't just say you want all devices that are at least 480 pixels across; if the device is in landscape orientation, you may get a false positive.
<link rel="stylesheet" href="mobile2.css" type="text/css" media="only screen and (min-device-width:768px) and (min-device-height:768px)" />This line brings in the same style sheet, but for different device: one with both a minimum height and minimum width of at least 768 pixels. That's the iPad, and it's going to get the same special style sheet as the iPhone 4.
Style your site. To understand what's going on in mobile.css, you first have to know a little about how the site is put together. See those big gray bars on the right and left of the page in Figure 1? The middle section, #container, is only 80 percent of the page. And while it looks nice on a big display to have all that room on the sides, it's a waste of space on a mobile device. So start off by making the content fill the entire width:
#container { width: 100%; }Something you may have noticed while looking at Figure 2 or Figure 3 (or looking at sites with one of your own devices): Bold fonts aren't attractive. They take up too much room and don't display well. Let's stop that for the site's normally bold navigation:
#navbar { font-weight: normal; }Next up, it's time to tweak your fonts. Each device comes with certain fonts, and I wasn't able to find any one font on all devices (but then, you can't even necessarily find out what Web fonts ship with a given device -- I'm looking at you, Android). But here's what's worked for me:
h1, h2, h3, h4, h5, h6 {
font-family: Albany, Georgia, "Times New Roman", "Droid Serif", serif;
}Albany is a serif font found on the Palm devices, Droid Serif on all Android devices, and Georgia and Times New Roman are on the iPhone and iPad. If you're supporting BlackBerry as well, add "BB Alpha Serif".
If you prefer sans serif fonts, try:
h1, h2, h3, h4, h5, h6 {
font-family: Prelude, Verdana, Arial, "Droid Sans", sans-serif;
}Prelude is a sans serif font found on the Palm devices, Droid Sans on all Android devices, and Verdana and Arial are on the iPhone and iPad. If you're supporting BlackBerry as well, add "BB Alpha Sans".
If you've used one of the higher-end mobile browsers and swapped orientation, you may have found it, well, a little disorienting. You're looking at a page where the fonts are a certain size, but then you go from portrait to landscape and the font size suddenly makes you feel like you're in a funhouse. So let's add a little styling to handle that:
.landscape { font-size: .5em; }
.portrait { font-size: .8em; }I'll show you the JavaScript later that provides the functionality behind this, but suffice it to say for now that when the page has its class attribute set to landscape, your fonts are at half-size; when it's in portrait orientation, the fonts are at 80 percent.
The lucky iPhone 4 and iPad have some special styles of their own:
.portrait #header img { width: 50em; }
.landscape #header img { width: 75em; }Looking back at Figure 1, you see that the header graphic is larger than will fit properly in most mobile browsers. The others will cut it off, and that's fine. But some browsers can handle oversized images, so tell them to compress it a tad instead.