HTML and CSS Reference
In-Depth Information
Or when dealing with icons, you could serve a larger background image to
devices with a higher pixel density, for example:
ul li:nth-of-type(1) a {
background-image: url(icons/home-32.png);
border-radius: 20px 0 0 0;
background-position: 25px 50%;
}
@media screen and (-o-min-device-pixel-ratio: 3/2) {
ul li:nth-of-type(1) a {
: ;
}
}
Yo u c a in s e e w of r k i in g e x a m p l e s of f t h e s e t e c h in i q u e s i in t h e fi l e h i g h - r e s of l u t i of in -
example.html. Note that at the moment
min-device-pixel-ratio
is supported dif-
ferently across browsers: Opera Mobile uses ratio values, for example, 3/2, whereas
We b K i it b a s e d m o b i l e b ro ws e rs s u p p o r it i it w i it h d e c i m a l s , s u c h a s 1 . 5 . I n it h e e x a m p l e
file you'll see multiple versions of the media query with different vendor prefixes
used to serve the different browsers values they recognize.
If you want to stop mobile browsers from applying their default zoom, you could
use the
target-densitydpi
viewport feature to tell the browser,
I really do want
to make 1 pixel equal 1 pixel; tell the whole truth, damn you!
like this:
<meta name=”viewport” content=”width=device-width,
p
target-densitydpi=device-dpi”>
