CODEWITHSUNDEEP
cssresponsive-designpixel
Jorge Arévalo
Jorge Arévalo

Reputation: 2998

What is an Android device independent pixel and how does it differ from a regular css pixel?

I'm learning concepts of responsive design, and I feel confused about the pixel. I know questions like that are frequent here, but still didn't find an (understandable by me) answer.

Please, correct me if I'm wrong:

There is an officially defined CSS pixel. This is the pixel we use when we code in CSS: width, height, border, etc. And each device (tablets, phones...) transform it in device pixels. The device pixel is unique in each device (I guess it depends on physical properties of the device screen), and the relation between that and the CSS pixels is the DPR (Device-Pixel Ratio).

And then there's the Device Independent Pixel. A concept created for Android phones, that works as an abstract layer between CSS pixels and device pixels.

So, I'm reading a lot these days, but still not sure about what should be important for me as a developer who wants to create responsive web sites. Looks like device pixels are not really important (the ratio between them and CSS pixels is handled by the device). But not really sure.

Anyone can throw some light here?

Upvotes: 2

Views: 744

Answers (1)

user31782
user31782

Reputation: 7589

As a developer all the information you are reading is important to you. I stumbled upon the same concepts when I was designing my first responsive design and thought latest iphone is a full hd mobile having resolution width about 1980 or may be 1080 pixels and I am using max-width: 768px in my media query.

As you mentioned there is an official css pixel which is equal 1/96 inches or in other words 1 inch of any media device has 96 css pixels. When you write media query you are referring to these css pixels. So if the iPhone has width around 3-4 inches then it is 300 to 400 css pixel wide. Now you might think that since only css pixels matter for web design you shouldn't care about dp ,dpi, ppi or dip like stuff. But you must know them too because you'll need them when designing for ratina displays.

The css pixels are also called logical pixels. The other kind of pixels are physical pixels. Actually a pixel by definition is the smallest colourable section of a screen. This smallest colourable section is called physical pixel. When we set border: 1px solid red, this would fill 1 logical pixel(1/96 inches) width on screen with red color. Now this logical pixel might have many physical pixels in it. If a screen provides 4 physical pixels in one logical pixel then we can distinguish 0.25 solid red from 0.5 solid red -- that is the screen can provide finer visual details.

Now why would you need to care about physical pixels? Nowadays screens have very high resolutions, that is more physical pixels in one logical pixels. E.g. mac book has around 2560-by-1600 resolution in around 13 inches screen where as a normal pc with 96dpi has 1367 by 768 physical pixels in 19 inches. Now if you render an image of width 1367 css pixels and height 768 css pixel on my normal 19 inches pc as <img src="bla.jpg" width="680" height="380"> then the image would be shrunk to half of its actual size. Every pair of pixels will be merged to one on my screen, that is I have lost a detail of 1px for every other 1px in the image. On the other hand if I render an image having width 680 css pixels and height 380 css px then both these image would appear exactly same. The fact is my screen provides only 1/96 inch wide minute detail only. On the other hand if I had mac book then the 1367 css px wide image would appear more crisper to me because mac book will scrunch the image to half but will not merge 2pixels into one and because it can provide detail of 0.5 logical pixel too that is it can show two different colors in 1/96 inches. Ok fine, but how can I use this fact for web designing? What we can do is provide higher resolution images to ratina display and lesser resolution images to normal displays. To do this we use the following: 

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    /* Retina-specific stuff here */
}

device-pixel-ratio is number of physical pixels available in one logical pixel on the display. dpi means the same thing. Actually dpi means physical pixels in one inch of display.

Upvotes: 2

Related Questions