HTML and CSS Reference
In-Depth Information
Though some smartphones have wonderful browsers and deal well
navigating conventional web sites, targeting handheld devices with
CSS changes alone may not always lead to the best experience for folks
because often the types of content or the tasks that mobile visitors are
looking for on your site are different from the desktop browser version.
Thus, having a separate mobile web site may sometimes be a better
option than just feeding the same HTML content with a different set of
styles to these visitors.
New in CSS3, media queries add a syntax for describing the characteris-
tics and features of the device being used to view a page, allowing for
more precise control or better targeting of those features that might
be why you provide one set of styles over another. The following code
demonstrates how to target a handheld device in landscape orientation
(wider than it is tall):
@media
handheld and (orientation:landscape)
{
[...]
}
The following links to an external CSS file only if the browser (view-
port) width is a color device that's wider than 600 pixels, regardless of
media type:
<link type=”text/css” media=”
color and (min-width: 600px)
”
➥
src=”default.css”>
As shown in the previous examples, you can combine media features into
a more complex description using the
and
keyword. You can use the
not
