![]() Given the fact we have no way to tell whether the user is visually impaired, what concerns us is simply typical viewing distance for the given device form factor - e.g., a mobile phone is usually held closer, and a laptop is usually used on a desk or a lap. With the exception of Google Glass (which mounts on your head), people usually find their own unique comfortable distance, dependent on their eyesight, for a particular device. The proper dimension of a CSS pixel is actually dependent on the distance between you and the display. The reference pixel is the visual angle of one pixel on a device with a pixel density of 96 DPI and a distance from the reader of an arm’s length. Instead of consulting your ophthalmologist on the definition of “seen comfortably”, the W3C CSS specification gives us a recommend reference: The dimension of a CSS pixel can be roughly regarded as a size to be seen comfortably by the naked human eye, not too small so you’d have to squint, and not big enough for you to see pixelation. Obviously this is a number too small to be printed on the specification, so the DPI stays. (width or height of one device pixel) = 1/125 inch = 0.008 inch = 0.02032 cm The MacBook Air (2011) I am currently using comes with a 125 DPI display, so ![]() The physical dimension of a device pixel is simply the inverse number of it’s DPI. Both units are essentially talking about the same thing when they refer to a screen display, where DPI is the commonly-used-but-incorrect unit and PPI is the more-accurate-but-no-one-cares one. The physical dimension of a device pixel on a specific device can be derived from the display pixel density given by the device manufacturer, usually in dots per inch (DPI), or pixels per inch (PPI). ![]() Display pixel density, dots per inch (DPI), or pixels per inch (ppi) In this post, we refer to the physical pixel on the screen as “ device pixel” (not to be confused with CSS pixel which will be explained later on). The single physical “light blob” on the display, capable of displaying the full color independent of it’s neighbour is called a pixel (picture element). The device pixelĬomputer screens display things in pixels. For the rest of us living in places using the metric system, since 1933, the “industrial inch” has been defined as mathematical equivalent of 2.54 centimeters, or 0.0254 metres. People who live in places where the inch is a common measure are already familiar with the physical unit. Have you ever figured out how to represent the speed of light in CSS pixels? In this post, we will explore the definition of CSS length units starting by understanding some of the physical units with the same name, in the style of C.G.P. When styling a web site with CSS you might have realised that an inch on a screen is not an actual inch, and a pixel is not necessarily an actual pixel.
0 Comments
Leave a Reply. |