HTML and CSS Reference
In-Depth Information
Know, too, that not all mobile browsers support stylesheets. For those
that do, connectivity issues may prevent the browser from loading the
stylesheet. Test all your content without any stylesheet, and make sure
that it presents well without styles.
14.4.4.2. Text fonts
Fonts present a particular problem to mobile content designers. Unlike
desktop browsers with access to hundreds of fonts in many variations,
mobile browsers often have just one available. It may come in only one
or two sizes, and may not offer italic and bold characters. The reality is
that the tiny displays on mobile devices are not equipped to show com-
plex fonts, so the device vendors avoid them because they would be il-
legible.
To work around these font restrictions, use header tags to enable differ-
ent font sizes, if they are available, instead of relative or absolute font
sizing. Most mobile browsers try to make a distinction between the
<h1>
,
<h2>
, and
<h3>
tags, so use them as intended for page titles, section
headers, and content delimiters in your pages. Keep in mind, too, that
many mobile browsers represent all the various emphasis tags (bold, it-
alic, emphasis, and the like) with bold text. If you try to use different
emphasis tags in a single page, your users may see only one kind of
emphasized text.
14.4.4.3. Margins and spacing
The narrow display on mobile devices constrains how you lay out your
pages. Avoid any sort of margins; you'll just be giving up precious hori-
zontal space. The same is true for nested lists: deep nesting will cause
your content to creep to the right, forcing your text into a single river of
words down the right edge of the display.
Absolute spacing and layout control is difficult on mobile devices. Com-
mon desktop tricks, such as 1 x 1 images and transparent GIFs, just
don't work as you would expect on a mobile device. Standard HTML ele-
