Converting Between Physical Pixels and CSS Pixels

Converting between physical pixels and CSS pixels

A pixel is a physical screen pixel as far as any web page can reasonably concern itself.

The wording ‘CSS pixel’ refers to a pixel as defined in CSS 2

the whole number of device pixels that best approximates the reference pixel. It is recommended that the reference pixel be the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length. For a nominal arm's length of 28 inches, the visual angle is therefore about 0.0213 degrees.

What this is saying is that a CSS pixel is a device pixel for the normal, simple screen cases. However, for specialist super-high-res screens where the OS scales up its normal dimensions by two, a CSS pixel may be two device pixels wide.

We now also have a ‘zoom’ feature in most browsers, which will naturally change the size of the CSS pixel (along with all other units) so it doesn't match a device pixel.

How does converting css pixels to device pixels work for Iphones?

In iOS screen are expressed in terms of points (pt.) which is used as a unit of measurement across all iOS designs. 1 point is always 1 point and is an abstract unit, only having meaning when referenced in relation to other points.

You can get the css screen size by using Native scale given by Apple for every device. Refer this link:

For different iPhone models refer the dimension sheet below for sizes in pt.
https://developer.apple.com/library/archive/documentation/DeviceInformation/Reference/iOSDeviceCompatibility/Displays/Displays.html

px = pt. x (Native scale)

Let see how native scale is derived taking into special case of iPhone 8 and 8+ models.

As per Apple the value of

1pt = 
      1 px at 163 dpi (1px x 1px = 1 pt) (Render @ 1x)
      4 px at 326 dpi (2px x 2px = 1 pt) (Render @ 2x)
      9 px at 489 dpi (3px x 3px = 1 pt) (Render @ 3x)
      ...

To calculate px from point use the following formula

px = (pt * DPI)/163

Considering case for iPhone 8

DPI: 326, Screen Size: 325pt x 667pt

L: (325 * 326)/163 = 650px
H: (667 * 326)/163 = 1334px

Making css screen as 650px x 1334px, where UI will be rendered are 2x and native scale @ 2.0

Considering case for iPhone 8 plus

DPI: 401, Screen Size: 414pt x 736pt

L: (414 * 401)/163 = 1018.5px
H: (736 * 401)/163 = 1810.6px

Making screen as 1018.5px x 1810.6px

Now it is not possible to render screen @ 2.46x as we cannot have a grid for 2.46px x 2.46px (Pixel is absolute unit not divisible) Getting to nearest whole number the screen is rendered are 3x. The native scale of iPhone 8+ is 2.608, which makes screen size as

L: 414 * 2.608 = 1080px
H: 736 * 2.608 = 1920px

This is how native scale factor is derived for devices to render UI at 1x, 2x or 3x and its relation with sizes and pixels.

How is physical inch related to pixels in css given so many different resolutions?

The inch in css is a logical inch and not physical since most browsers cannot determine the physical size of the screen. By default this is set to 96dpi , hence 96px for each inch.

Refer here

My recommendation would be not to rely on inch/cm units but rather em based layout and use javascript for dynamic resizing as shown here : Dynamically Resizing Text with CSS and Javascript

CSS pixels vs device pixels on iPhone

Iphone pixels are like any other pixel. A 96px wide <div> is always 96px wide in any device. DPI (Dots Per Inch) just tell you the ratio between physical pixels (dots) on a screen (or paper) and inches and don't represent any size. DPI are only a ratio between pixels and a real world unit of measurement.

A 96px div would look 6x bigger in a 50 DPI screen than a 300 DPI screen.

DPI vary depending on the device or print/scan quality, therefore 1 inch is NOT always equal to 96 pixels. W3C is just saying that the absolute length units are fixed in relation to each other (it is just an arbitrary approximation to make CSS units consistent). This does not mean that real world units of measurement (inches, cm) can be given a fixed ratio to pixels.

The best help i can give you to understand this is that 1px is only and always equal to 1px. Any comparison between pixels and real world units depends on the DPI of a specific device, not on a standard like the W3C.

The absolute length units are fixed in relation to each other and
anchored to some physical measurement. They are mainly useful when the
output environment is known.

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

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.

Access to hardware pixels on mobile devices

Screen scale factor (Retina, presently either 2x or 3x) is distinct from page scale factor. At the same page scale factor, 1px would be 1x1, 2x2, or 3x3 hardware pixels, depending on the (Retina) display.

It sounds like what you're looking to do is to drive the screen at a "native" resolution which would make it appear that it has 2x or 3x as many pixels, but at a (non-Retina) screen scale of 1.

To accomplish that, you'd have to transform the view by multiplying its size by the screen scale factor, while scaling it by the inverse of its screen factor.

You can set the head's <meta name="viewport" content="width=device-width-times-2, initial-scale=0.5"> but your content will be far less readable and sharp.

If you're looking to do this on an element basis, you can set

-webkit-transform-style: preserve-3d;
-webkit-transform: scale3d(0.5,0.5,0.5);

3d is necessary, as a 2d transformation may lead to issues with the touch area not matching up with the element's location in the view.

using css pixel calculating screen size, where is wrong?

A CSS pixel is not always 0.26mm

From CSS W3:

The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length. For a nominal arm's length of 28 inches, the visual angle is therefore about 0.0213 degrees. For reading at arm's length, 1px thus corresponds to about 0.26 mm (1/96 inch).

The iPhone4 is not 96dpi. With a device pixel ratio of 2, its "CSS dpi" is around 163. Since 96dpi devices render 320px at 83.2mm, mathematically, 163dpi devices should render 320px at 49mm.

---

Related Topics