If I specify the width of a <div> tag using CSS as 96px, how many device pixels should that occupy on the screen of a first generation iPhone?
I added <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> to the page, took a screenshot on the simulator, and measured the div to be 96 device pixels wide. Now, I read the W3 spec for CSS pixels and it states that 1px is 1/96th of an inch. So 96 CSS pixels should translate to 1 inch. Since the original iPhone has a DPI of 163, one inch on the screen should occupy 163 device pixels. Why am I not getting that measurement? In other words, should 96 CSS pixels be equal to 1 inch?
I saw that the spec also mentions anchoring to a reference pixel. It seems to me that the reference pixel is simply a device pixel in this case. If I was to work backwards to get the CSS pixel values from a screenshot, would it generally be correct to assume that one device pixel equals one CSS pixel on the iPhone (non-retina display)?
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.
Related
Why bother with pixels? One person has a very large display with very few pixels, another has a medium display with medium density, let's say 1080p 24inch, and yet another is using a 1440p phone display.
What is even the point of using media queries using pixel sizes??? How do I query the actual display size in centimeters, which is exponentially more useful?
What I want it for: actually reliably determining whether to use mobile or desktop style.
No JS, it is too slow.
Difference between Viewport and Resolution
The Pixel & Pixel Per Inch
Mobile and other similar devices' screens are contained on pixels (individual points of color) and together when all pixel display feels like an image. Number of pixels on the horizontal axis and the number of pixels on vertical axis called resolution. The sharpness of images/text or anything which is displayed on a screen depends on the resolution and screen size. The same pixel resolution will show sharper on a smaller screen and gradually lose sharpness on large screens because the same number of pixels are being spread over a large n number of inches.
Normally the screen's physical size calculated in inches and as resolution depends on the screen's physical size so to determine screen's resolution unit is called Pixels Per Inch.
Number of pixels increases per inch it increases the quality of display and ratio. Here is a question: how many pixels in an inch so we can calculate resolution of a screen? Well, there is no specific answer because we can't set some single value for all screens it also varies from screen sizes Typically it lies between 72 - 162 pixels per inch and its value increases as the screen goes smaller.
Viewport
Device's visible area for a user is called, the actual viewport size of the screen.
Viewport screen size
Viewport screen size is the actual resolution of any screen and it depends how much unit of pixels per inch simply. Viewport always remains same in terms of screen size as screen size remains same but resolution to display it, is changeable for example old 15" monitors can display different resolutions from 800 x 600, 1024 x 768 and 1280 x 1023 so it depends on focus ability of a screen.
Note that As resolution goes smaller from its original or maximum display resolution, you will get blurry results because the same number of pixels is now spreading on big viewport size.
CSS Pixel Ratio
An inch can contain about 72 - 162 pixels. Let's consider 132 pixels per inch for a mobile as a unit for every device. One unit pixels equal to 1 CSS pixel ratio. So if unit pixels increases, CSS pixel ratio will be increased. For example a device has 296 PPI then it's pixel ratio can be 2 (after point can be ignored).
Resolution, Viewport and CSS Pixel Ratio
The resolution depends on CSS pixel ratio. If cases pixel ratio increases the resolution of the device can be increased, but remember viewport of size, which is the actual visible size of the screen will not change. The maximum resolution of a screen is actually a multiplier of CSS pixel ratio.
Example
iPhone 7
Viewport size: 375 x 667 Pixels
Resolution: 750 x 1334 Pixels
Pixel Density: ~326 ppi
CSS Pixel Ratio: 2
I'm a little confused about the device pixel ratio.If I use a 1000px image to represent a 100px CSS with a cell phone pixel ratio of 2, is it a waste of 800 pixels? If not, one CSS pixel represents 10 physical pixels.
The W3C documentation states the following:
Pixels (px) are relative to the viewing device. For low-dpi devices, 1px is one device pixel (dot) of the display. For printers and high resolution screens 1px implies multiple device pixels.
This kind of makes sense for standard elements, like divs and tables. If the screen has a greater pixel density, more real pixels are reserved for a CSS pixel, in order to keep the actual element dimension roughly equal on all the screens regardless their density. In this sense, CSS pixels can be seen as a pseudo-absolute length measure.
But what about images? I know it's bad practice to let the browser to resize images. But then how source image's pixels are treated? I suppose it can't be the same as other elements, otherwise I would get a low resolution image on high-density screen, given that more device pixels are assigned to a single image pixel.
If the resolution of an image is lower than the resolution of the screen, the graphic card will add pixels to make the image fill the pixels needed.
So if your image has the same resolution than your screen, each pixels of the image is rendered in each pixels of your screen.
But if your image has a lower resolution than your screen, and if the graphic card would not do the job, your image would appear smaller because it has not enought pixels to fill your actual screen resolution.
As your can see, the graphic card will always force a middle color, which is a medium between your two colors.
Obviously, if you image if a full black pixels, the middle color of black-black is black, so the image will not appear stretched.
I use ems everywhere in my style-sheets rather than px. But the computed styles/metrics in Chrome Developer Tools seem to default to showing me px, even for elements where I've explicitly used ems in the style-sheet:
(This is a picture of the computed lengths for a button with an icon from Font Awesome. I set the padding to 0.4em and I brought this up to see how tall the icon is.) Sure I can just divide everything by 16, but for numbers like "14.841" that's not so easy to do in my head. Is there a setting somewhere to change the length measurement unit? (Kind of like in most desktop graphics and image manipulation programs where I can choose pixels, points, inches or centimeters?) Either that, or is there somewhere else in the dev tools that can show the lengths in ems? (The rulers, ...?)
The values shown on the Computed tab are just that: computed. Therefore, they are listed in a "absolute" length unit like pixels and not a "relative" length unit like ems, rems or percentage, which all base their size off of some other criteria. For instance, if you set an elment to 100% of the viewport width, it will show you how many pixels the width of the element computes to and there is no option to view the value in any other unit. Likewise, because you're using ems, how big your icon is will be based off the inherited font-size value.
In fact, I haven't tested this but I think the px values shown on the computed tab are technically shown in device pixels and not CSS pixels, as CSS pixels themselves are relative length units (since their size is based on the DPI of the device screen).
Relative Length Units
Absolute Length Units
How can i specify a box to be 1x1 inches. That should be printed as 1x1 inch box and will be seen as 1x1 inch box on screen.
JSFiddle: http://jsfiddle.net/eR9CS/
Inches:
<div style="background-color: red; width: 1in; height: 1in;"></div>
Centimeters:
<div style="background-color: red; width: 1cm; height: 1cm;"></div>
Relative length units
em The computed font-size.
ex The height of a lowercase "x".
px Pixels, relative to the viewing device.
% Percentage.
rem The font size of the root element.
vw The viewport width.
vh The viewport height.
vm The smaller value of viewport width or height.
ch Zero-width (width of the zero glyph in the rendering font).
Absolute length units
in Inches (1 inch = 2.54 centimeters).
cm Centimeters.
mm Millimeters.
pt Points (1 point = 1/72 inches).
pc Picas (1 pica = 12 points).
If you want to use centimeters everywhere but want an inch, use style="width: 2.54cm; height: 2.54cm;" since 1 inch = 2.54cm.
This is not possible. You can only get some approximations. Setting the width and height to 1in is your best shot, but it’s not a particularly good shot, as you can see if you measure the dimensions (on different devices). As the CSS3 Units module describes, the so-called absolute units can be anchored either to physical units or to pixels. The fixed relations like 1in = 96px then implies that (except by accident) CSS in is not the real physical inch or CSS px is not the real physical pixel.
On paper, you could expect a physical unit to be the anchor unit, so that in would really be the inch. But even this expectation often fails.