HTML and CSS Reference
In-Depth Information
Yo u c a n u n d e r s t a n d w h y b r o w s e r c r e a t o r s w o u l d d o t h i s . H i s t o r i c a l l y, m o s t
sites are not created with responsive techniques in mind; therefore, they would
look crappy if rendered at widths of 480px, 320px, or less. But in this responsive
world, you should override this behavior so that your media queries behave like
you want them to.
Yo u c o u l d d o t h i s b y c h a n g i n g y o u r
width
/
height
media queries to always test
for the equivalent
device-width
/
device-height
as well. For example:
@media all and (max-width: 800px), @media all and
p
(max-device-width: 800px) {
.
}
But having to do this for every
@media
block means a lot of extra typing and
hassle, so let's look at a better solution: viewport.
<META NAME="VIEWPORT">
A better, less messy way to make media queries behave themselves is to use the
viewport meta tag. Invented by Apple to make web apps display more reliably
on iDevices, it was adopted by other browser manufacturers because it is a jolly
good idea.
To g e t yo u r m e d i a q u e r i e s t To b e h av e (
Figure 8.12
), you can add the following
line into your HTML
<head>
(see media-blitz-6-with-viewport.html in the code
download folder):
<meta name=”viewport” content=”width=device-width”>
This makes the browser render the site at its true width, triggering media que-
ries as appropriate.
