Targeting High Screen Densities with CSS Media Queries

骑猪看日落 2022-09-20 15:21 167阅读 0赞

From [http://www.fiveminutes.eu/targeting-hight-screen-densities-with-css-media-queries/][http_www.fiveminutes.eu_targeting-hight-screen-densities-with-css-media-queries]

The future is here – more and more handhelds are being built with high definition screens. The iPhone ships the Retina display, while on the Android ([as of August 02, 2010][as of August 02_ 2010]) HDPI accounts for more than 50% devices.

To web developers, there is clearly a need to build high density compatible web sites.

### FIRST, THE THEORY ###

A DPI stands for dots per inch meaning the number of pixels your device can fit within an inch. Higher DPI devices fit more pixels on to screen of the same size, resulting in sharper picture. Compared to your regular desktop screen, Android HDPI fits 1.5 times more pixels on the same amount of space, while the Retina doubles the amount of pixels of a desktop screen and the previous iPhone generation.

### PIXEL IS NOT A PIXEL ###

To a developer the key is the notion of CSS vs device pixel. If you have a web page size of say, 400 pixels, on a desktop screen and iPhone 3 you’re going to see a page occupying exactly 400 pixels of device screen. However, on a Retina screen, that 400 pixels occupies 800 pixels of space. The Retina display, having double the DPI amount, needs to scale the page in order to occupy the same amount of physical space. If it didn’t, it would just display the page to a portion of space (400 pixels) and the rest of it (240 pixels) would get wasted.

So the important aspect is the ratio of device to CSS pixel: how much space the original design (CSS pixel) accounts on the actual device screen. The webkit word for it is the \-webkit-device-pixel-ratio. See the table below for an overview of various device pixel ratios.

<table style="border:0px; margin:auto; padding:0px; vertical-align:baseline; border-collapse:collapse; border-spacing:0px; color:rgb(105,103,108); font-family:'Lucida Sans','Lucida Grande',sans-serif; font-size:14px; line-height:20px; background:rgb(253,253,253)"> 
 <thead style="border:0px; margin:0px; padding:0px; vertical-align:baseline; background:transparent"> 
  <tr style="border:0px; margin:0px; padding:0px; vertical-align:baseline; background:transparent"> 
   <td style="border:0px; margin:0px; padding:0px; vertical-align:baseline; background:transparent"> <span style="border:0px; margin:0px; padding:0px; vertical-align:baseline; background:transparent">Device</span></td> 
   <td style="border:0px; margin:0px; padding:0px; vertical-align:baseline; background:transparent"> <span style="border:0px; margin:0px; padding:0px; vertical-align:baseline; background:transparent">Resolution</span></td> 
   <td style="border:0px; margin:0px; padding:0px; vertical-align:baseline; background:transparent"> <span style="border:0px; margin:0px; padding:0px; vertical-align:baseline; background:transparent">Device-pixel Ratio</span></td> 
  </tr> 
 </thead> 
 <tbody style="border:0px; margin:0px; padding:0px; vertical-align:baseline; background:transparent"> 
  <tr style="border:0px; margin:0px; padding:0px; vertical-align:baseline; background:transparent"> 
   <td style="border:0px; margin:0px; padding:0px; vertical-align:baseline; background:transparent"> Android LDPI</td> 
   <td style="border:0px; margin:0px; padding:0px; vertical-align:baseline; background:transparent"> 320×240</td> 
   <td style="border:0px; margin:0px; padding:0px; vertical-align:baseline; background:transparent"> 0.75</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px; vertical-align:baseline; background:transparent"> 
   <td style="border:0px; margin:0px; padding:0px; vertical-align:baseline; background:transparent"> Iphone 3 &amp; Android MDPI</td> 
   <td style="border:0px; margin:0px; padding:0px; vertical-align:baseline; background:transparent"> 320×480</td> 
   <td style="border:0px; margin:0px; padding:0px; vertical-align:baseline; background:transparent"> 1</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px; vertical-align:baseline; background:transparent"> 
   <td style="border:0px; margin:0px; padding:0px; vertical-align:baseline; background:transparent"> Android HDPI</td> 
   <td style="border:0px; margin:0px; padding:0px; vertical-align:baseline; background:transparent"> 480×800</td> 
   <td style="border:0px; margin:0px; padding:0px; vertical-align:baseline; background:transparent"> 1.5</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px; vertical-align:baseline; background:transparent"> 
   <td style="border:0px; margin:0px; padding:0px; vertical-align:baseline; background:transparent"> Iphone 4</td> 
   <td style="border:0px; margin:0px; padding:0px; vertical-align:baseline; background:transparent"> 960×640</td> 
   <td style="border:0px; margin:0px; padding:0px; vertical-align:baseline; background:transparent"> 2.0</td> 
  </tr> 
 </tbody> 
</table>

### THE PROBLEM ###

Having more pixels is all that nice when it comes to text, but once your page is zoomed in, the images get scaled beyond their original size. Due to scaling algorithm you lose the clarity of the pictures. Buttons, graphics, icons and anything bitmap related gets blurred.

### THE SOLUTION ###

Obvious one: you need to provide a properly sized image assets, each with a different DPI.

Using the CSS media queries this is fairly easy:

Basically the device-pixel-ration of 2.0 or higher will use theretina.css. Note that you could go without the retina.css, in which case hdpi.css would be applied to both Android HDPI and iPhone Retina displays. You can also specify these in a single stylesheet:

#header {
        background:url(mdpi/bg.png);
    }
    @media screen and (-webkit-device-pixel-ratio: 1.5) {
        // CSS for high-density screens
        #header {
            background:url(hdpi/bg.png);
        }
    }

Amongst other things to try is to avoid bitmap graphics altogether and go with the vector (SVG) format where it makes sense. The trend is clearly into making high density compatible web sites, and using these simple CSS rules makes it easy.

[http_www.fiveminutes.eu_targeting-hight-screen-densities-with-css-media-queries]: http://www.fiveminutes.eu/targeting-hight-screen-densities-with-css-media-queries/
[as of August 02_ 2010]: http://developer.android.com/resources/dashboard/screens.html