HTML and CSS Reference
In-Depth Information
As if the techniques you've looked at so far weren't complicated enough, many
devices from Apple, HTC, LG, Nokia, and more are now coming out with high-
resolution screens. For that reason, text and images are in danger of becoming
illegibly small.
To co m p e n s at e fo r t h i s p To t e nt i a l p for b l e m , m To b i l e b for ws e rs To n h i g h - re s To l u t i To n
devices lie to you twice. Not only do they render sites at a broader width than the
physical device width, but they also apply a default zoom to the content. So a
CSS pixel can actually equal multiple device pixels (yes, folks, bizarrely enough,
pixels in CSS are actually a relative unit). For example, in Opera Mobile running
on an HTC Desire S, the zoom factor is 1.5, and in the default browser on iOS 4,
the zoom factor is 2.
How do you deal with this extra level of complexity? Generally, it's not that
much of an ordeal, because most of the features on your web page will still look
crisp when scaled. It's mainly just images and video you need to worry about. If
you are concerned about your images not looking as crisp as they could, you could
reference a slightly larger image than required in your <img> element and then
constrain the size, so when it is scaled up in high-resolution browsers, it stays crisp:
<img src=”images/tribal-sun-640px.jpg” width=”480”>
Or in the case of CSS background images, you could check for a certain pixel
ratio via a media query and use additional rules inside the media query to “fix” the
issue in browsers that pass the test.
For example, you could use background-size to cancel out the effects of the
device zoom in the case of a background slice:
#wrap {
: ;
@media screen and (min-device-pixel-ratio: 3/2) {
p {
: ;
/* Original image is 1.5 times this size - 383px */
Search WWH ::

Custom Search