I came across a strange problem while I was testing a simple webpage made in webflow, for responsiveness. Now this is not a webflow question, but I think the problem has something to do with the resolution, physical screen size and pixel density. Just it's not clear to me what is happening.
So there were 3 media queries. One for mobile/iPad (we will ignore them since they worked as expected), laptop screen(1280 to 1024px) and large desktop screen (equal to or above 1920). I styled the site on 1920 and the chrome Dev tool also rendered it for lower and higher screens as I expected. But when the site was viewed in a MacBook whose resolution is much higher than 1920 but the physical screen size is much smaller than a traditional monitor, rendered the media query styled for laptops. I expected with its high resolution, it will display the highest media query.
Why this has happened and how to get around this? Or this is actually okay and no fix is needed?
While delving into CSS units I've encountered a definition of the reference pixel. However, I wasn't able to find a consistent and comprehensive description of its relation to the CSS pixel unit. I've done some research on this matter, yet it's still a little bit unclear to me.
1. Gathered information
1.1 A pixel definition
There are two distinct types/definitions of a pixel:
"Device pixel" — a single physical point on a display.
And:
CSS pixel — a unit most closely matching the reference pixel. [1]
Two parallel concepts under the same name definitely don't clarify the confusion.
I fully understand the purpose of introducing the second one, but I find its nomenclature misleading. The CSS pixel is classified as an absolute unit and:
"Absolute length units are fixed in relation to each other." [1]
The above statement seems pretty obvious for every unit except for the pixel. Following the w3c specification:
"For a CSS device, these dimensions are either anchored (i) by relating the physical units to their physical measurements, or (ii) by relating the pixel unit to the reference pixel.
(...) Note that if the anchor unit is the pixel unit, the physical units might not match their physical measurements. Alternatively if the anchor unit is a physical unit, the pixel unit might not map to a whole number of device pixels." [1]
Considering the aforementioned quotation I assume that absolute units are not all that absolute, since they may be anchored to the reference pixel.
1.2 The reference pixel
The reference pixel itself is actually an angular measurement [2]:
"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." [1]
What is illustrated on the image below:
Despite defining the reference pixel as a visual angle, we can further read:
"For reading at arm's length, 1px thus corresponds to about 0.26 mm (1/96 inch)."
Leaving inconsistencies aside, we are able to establish a value of the angle:
α = 2 * arctan(0.026/142) = 0.02098°
where:
α — a value of the visual angle
Thus a size of the displayed unit equals:
y = 2x * tan(0.01049°)
where:
y — a displayed unit size
x — a reading distance
Given the above formula, in order to calculate a unit size we need to determine what's the actual reading distance. As it may vary among users, its categorisation has been based on a device's DPI.
1.2.1 DPI
For convenience, let's assume that DPI == PPI.
This measurement allows us to guess a display type.
Quick check:
IPhone 6 (4.7", 1334×750): 326 ppi;
Sony Bravia 4K (54.6", 3840×2160): 75 ppi.
So, in general, the bigger PPI the closer to a screen a user sits. The table below [3] presents reading distance recommendations for devices with particular DPI:
———————————————————————————————————————
| DPI | Pixel size | Reading distance |
—————————————————————————————————————————————————————
|PC's CRT | 96 | ~0.2646 mm | ~71 cm |
|display | | | |
—————————————————————————————————————————————————————
|Laptop's LCD | 125 | 0.2032 mm | ~55 cm |
|display | | | |
—————————————————————————————————————————————————————
|Tablet | 160 | ~0.159 mm | ~43 cm |
—————————————————————————————————————————————————————
However, it's unclear to me how those distance values were obtained. Is the relation to DPI described with a function or is it just an empirical observation?
1.2.2 Device Pixel Ratio
The introduction of the Retina display complicated the matter even further. Its PPI tends to be approximately 2 times bigger than non-Retina one's, while a recommended reading distance should remain the same.
Since a CSS pixel size doesn't necessarily correspond with a device pixel size, I assume that the unit size on the Retina display is firstly translated into a reference pixel size (expressed in device pixels) and then multiplied by pixel ratio. Is it correct?
1.2.3 Zooming
While zooming in, the displayed reference pixel size grows [4], ergo a distance from a display grows. It's quite counterintuitive, because it means that we are "stepping away" from the screen, not getting closer to it.
2. Questions
Concluding my doubts and articulating questions:
How a CSS pixel size is calculated when the anchor unit is a physical unit?
How to establish the formula for a relation between DPI and a reading distance?
How a CSS pixel size is calculated for non-standard, high DPI/PPI devices such as printers and Retina Displays?
Also, please correct me if my reasoning is invalid or I am missing something. Thanks for replies.
3. References
W3C Specification
inamidst.com, Sean B. Palmer's site
Mozzilla Hacks
1uirksmode.org
I may be wrong but I don't think it's possible for CSS pixel to have the physical unit as an anchor.
Based on this article:
The px unit is the magic unit of CSS. It is not related to the current
font and also not related to the absolute units. The px unit is
defined to be small but visible, and such that a horizontal 1px wide
line can be displayed with sharp edges (no anti-aliasing). What is
sharp, small and visible depends on the device and the way it is used:
do you hold it close to your eyes, like a mobile phone, at arms
length, like a computer monitor, or somewhere in between, like a book?
The px is thus not defined as a constant length, but as something that
depends on the type of device and its typical use.
UPDATE: I was wrong. It is possible just not implemented in any browser currently. In cases where that is indeed the case, as per spec: "these dimensions are either anchored (i) by relating the physical units to their physical measurements" meaning that 1px will be equal to 1/96th of a physical inch.
As for the relation between DPI and reading distance in the table, it takes that if DPI = 96 then reading distance is ~71cm or 28in and these values are inversely proportional meaning higher DPI will result in a smaller reading distance.
From that it's easy to come up with a formula:
x = 125/96
y = 71/x
where:
x - ratio between second and first DPI value
y - reading distance for second DPI value
For higher resolution devices there is an example given lower in Mozilla Hacks article:
Let’s take iPhone 4 as the most famous example. It comes with a 326
DPI display. According to our table above, as a smartphone, it’s
typical viewing distance is 16.8 inches and it’s baseline pixel
density is 160 DPI. To create one CSS pixel, Apple chose to set the
device pixel ratio to 2, which effectively makes iOS Safari display
web pages in the same way as it would on a 163 DPI phone.
So that means we have two resolutions - physical (PPI) and CSS one (cssppi). It seems that cssppi is used for calculating reference pixel size and then device manufacturers choose how much reference pixels will they map to one CSS pixel (I assume this number is equal to device pixel ratio value but not 100% sure).
Here's table with comparisons for some common devices pixel ratio, PPI, and cssppi: http://mydevice.io/devices/
For more information and reference check following articles:
A List Apart - A Pixel Identity Crisis
Pixels Per Inch Awareness and CSS Px
Physical Size of CSS Units On Smartphones, Tablets & Co
IN THE PAST
1 CSS pixel = 1 pixel on a 96 DPI inch monitor
(common on old windows monitors)
TODAY 1 CSS pixel = (???) pixels on a newer DPI display (smart phones, newer monitors, tv's. etc.)
There are now two different interpretations of the pixel today. The past one and the present one. That's the source of the confusion. But a "CSS pixel" has always been a CSS pixel. It was renamed a "reference pixel" only recently to help associate a CSS pixel's recalculation into "device pixels" on newer HD displays. The old CSS pixel was closely associated with the physical units on screens and printers prior to 2011. At least, the W3C recommendation was asking vendors to follow that spec. It was not till the invention of the iPhone and later HD device screens that the "1 CSS pixel = 1/96th of an inch on a screen" interpretation failed and was abandoned.
The solution was to allow manufacturers with HD screens to "reinterpret", as they like, the "CSS pixel" or "reference pixel" into a new "Device pixel" only they control. So now, how many CSS pixels should fit into a given physical dimension on a screen and its affect on viewers on newer digital devices has changed. The new "device pixel" that tries to follow the 1 CSS pixel = 1/96th of an inch (modified by user viewing distance for smaller screens) no longer applies because screen PPI depth or "pixel density" has increased.
On most newer HD sceens today, the CSS pixel is now recreated across multiple device pixels depending upon the size and PPI of the device. A 72 dpi image on an old Windows monitor would look tiny on a modern iPhone screen, if it did not do that. But you will notice each phone and screen now has its own pixel density (PPI or DPI), screen resolution (pixel width x height), its own physical viewport size (inches), its own default zoom and font resizing systems, its own layout rules (landscape, etc.), and thus their own rules for how they reinterpret the CSS pixel into device pixels (2, 3, 4, etc). You ask what is the formula? I say there is no formula. The industry, in my opinion, does not follow any known standard and has not since abandoning W3C standards after 2010.
Below is some history that may help...
HISTORY OF THE CSS PIXEL
Years ago in the Golden Age of Web Development (pre-2010), defining an "inch" (in) in Cascading Style Sheets would be correctly correlated to an inch on the screen or in print, allowing the 96 pixels per inch to a reader viewing it at arms length always getting the same experience. That was why and how the 96 dots per inch standard was invented. It was designed to force manufacturers to give users the same visual experience with the almighty digital or CSS pixel.
Starting in the 1990's, these CSS standards fell on the shoulders of computer OS manufacturers and their monitors. When it was done right on old Windows and Mac screens prior to 2011, they mapped 96 DPI correctly. You saw Macs and Windows computer screens correctly laying the right pixels per inch onto the screen, so that the CSS "pixel" would fit consistently into it, regardless of manufacturer, vendor, screen, or device. There were visual differences as far as website displays between Macs and Windows due to their slightly different screen dimensions and pixel densities. But that was based on their views of how large or small visuals should be for their viewers. But that did not change the overall CSS standard.
After 2000, an "inch" of website in a browser looked close to an inch on most screens and worked that way for most viewers. Sure, you could increase resolution, or how many pixels could be crammed into a screen. But that did not change the 96 pixels per inch rule, as it worked on the natural assumption a user might choose larger or small text or DPI from the default. This was the same as zoom back then. But after 2000, the CSS pixel and millions of supporting websites fit perfectly on millions of desktop screens, devices, and printed pages.
Prior to 2007, most screens translated every web page and CSS pixel to the "per inch" expectation. So as developers, we initially started trying to fit pixel-based layouts and our favorites font size choices into strict physical layouts using standard 96 dpi and Windows monitors and 72 dpi Mac screens. Of course, after 2001, monitors starting getting larger and resolution settings higher. But everyone knew an inch was still an inch, and a pixel was still a pixel. We could design website layouts to expand and grow based on that 96 DPI standard.
Macs using 72 DPI, we always knew Mac people saw things a little differently, however. As a web developer in 2000, I remember using this system and it worked quite well. But when testing on Macs and Windows, I remember seeing a strange effect...how websites looked slightly larger on Mac screens. Because 72 dpi was the lowest common denominator that is what we used for the default resolution on everything, including sizes of images, web layouts in pixels, etc. That's why there's so much 72 dpi imagery on the web now. But this worked well for over a decade after 2000. CSS pixels worked as expected!
THE IPHONE
After the invention of the iPhone in 2007 the idea of the 96 DPI pixel started to change. Why? The resolution or number of pixels per inch (PPI) increased on tiny screens dramatically. That meant at say 200 PPI, the general resolution of a high density iPhone small screen device, a normal website would look tiny and compressed, the text unreadable and the images less that half their expected size as seen on Windows 96 DPI monitors.
But that is the way the CSS pixel was supposed to work. The way CSS addressed these small-screen, high resolution issues was with the "handheld" media query.
I remember building a website using CSS "handheld" and shifting the pixels in my layout, even revealing higher resolution images for iPhones. This worked initially except for one simple fact.....these new screens and devices REFUSED TO ADOPT THE CSS STANDARDS! Why? They wanted millions of websites to look good out-of-the-box without special CSS adaptions. This is a failure in my book, but se la vi.
So....the W3C by 2011 realized their great standards would never look consistently on these new vendor devices, who wanted quick profits, not standards. So they flipped the definition to start at 96 DPI as a "reference" pixel, then allow vendors to keep creating greater and greater resolution screens but then "reinterpret" the CSS pixel to a "device pixel" they control.
After 2011, the W3C stopped expecting common displays, screens, and devices to correctly define what an absolute dimensional unit in CSS (cm, mm, in, etc) should look like on screens. This was because the vendors making HD screens started increasing resolutions so websites got tinier and tinier until the CSS standards broke. That was when the concept of the "device pixel" was born where devices recreate your CSS pixel by cramming multiple pixels into it.
What does this mean? It means every device automatically regenerates your website design and its reference CSS pixel to a new pixel size. In other words, your website becomes larger and more readable on these tiny screens by default. Your 1 pixel may be remapped to 2 pixels. Average "device pixel" ranges are 2-4 now. Apple iPhone people had no choice in how they chose to translate CSS pixels when their high resolution devices came on the scene. If they didn't adapt to a new device pixel interpretation, we would all be looking at very teeny-tiny 72 dpi GIFs on 400+ dpi retina displays and 4k monitors all over the web. We would have unreadable websites on millions of new modern devices.
You cannot control this. All you can do is focus on avoiding strict pixel-based layouts and PPI/DPI imagery and focus on website layout flexibility. That is why I avoid pixels in 2022 and try and use text-based unit layouts that change based on the user's font-size and using absolute font-size unit layouts and rem/em units rather than pixels. My websites now naturally stretch to fill whatever the screen, phone, monitor, or tv settings use based on the natural size of fonts and text set by the user.
But this is how and why the "device pixel" was born and why pixels now are very difficult to control. The device pixel simply holds double or triple the website pixels given it, in most cases now. It tries to figure out how many web design CSS pixels are crammed into one inch of their physical HD displays.
Kids today building websites just assume its always been that way. They have no clue. That's why most experienced, modern web developers now use relative font sizing and avoid pixels as units for anything. Doing so, your layouts can now stretch based on either the percentages needed to fill the screens and odd view-ports used today, adapt to a user's larger or smaller font sizes, use a user's zoom settings, or just use the default device pixel settings the device uses out of the box. We aren't chained to precise pixel-based layouts any more because of this mess. Pages can stretch in websites to fill what's there. But many kids developing websites still cling to the "css pixel" as if its a God. It's not guys. Its dead.
I think that is how we got here and why new screen technology destroyed what used to be a very simple and elegant website technology. Today its a mess! Why? Because vendors hate standards. They never could come together as a tech industry and define it. There's no money in adopting any of it. So this website pixel translation problem will just get worse as newer devices come online the next 50 years. By then CSS will likely adopt a "hack" that allows us to control how pixels display. In fact in CSS3 you can already sniff for resolutions, set dimensions based on physical view-port sizes, mobile devices, device pixel settings, zoom, media queries, etc.
But those new ideas do not help fix the problem, in my book. They just layer over more complexity and confusion rather than forcing all screen and device manufacturers to use the same, simple CSS pixel, which should be universal across all screens, past and present.
I came across several ways and questions about the sizes of the ipad and iphone and how to use different css. Is it really necessary, especially now with more versions of the ipad and iphone to have a different background for each and every device?
Almost every answer/site about this problem tells the user to use the resolution 1024 for an iPad but according to Apple's site the latest iPad has a resolution of 2048 x 1536 pixels?
So do I need to make one background with 1024 in width for iPad 2 (or whatever), then one with 2048 for iPad 3, another one for iPhone etc or is there an easier solution?
I thought "background-size: cover" would be the solution for every resolution (since it scales automatically) but it apparently isn't since it doesn't seem to work on an iPad.
So do I need to make one background with 1024 in width for iPad 2 (or
whatever), then one with 2048 for iPad 3, another one for iPhone etc
No. Despite the different device resolutions, they still follow the original numbers in terms of targeting them with CSS. So all iPads respond to device-width: 1024px, and iPhones still stick with 320px, even if they now pack in far more pixels.
The only thing to be aware of is that iPhone5 is a little taller so it responds to 320 x 560px.
Anyhow, in terms of background-size, all of this is kind of irrelevant, because the whole point of it is that it can size the image appropriately to cover any screen if you use background-size: cover.
Considering a css pixel is not a device pixel on high DPI device, predict and manage touch target size across these devices have been a headache for me.
For example, say I have a Web App with viewport meta "width=device-width, initial-scale=1.0", on iPad (9.7 inch screen) in landscape mode, viewport is set to 1024px, and 50px (in css) is roughly 1cm in physical size.
However for device such as Nexus 7 (7 inch screen), viewport would be set to 966px, thus 50px (in css) is only about 0.7cm in physical size. (Not to mention a growing list of High DPI device that I may not get my hands on)
Different guideline varies on recommeneded touch target size, but I tend to prefer around 1cm to allow for human error.
Is there a best practice for such scenario? the idea described in Let's Get Physical (Units) is the closest I found via google, but far from production ready.
Start using em or percentages instead of px.
This is probably going to be what pushes everyone over the line.
this is mentioned every article about mobile web, but nowhere I can found an explanation of what exactly does this attribute measure.
Can anyone please elaborate what does queries like this check?
#media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (-o-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
//high resolution images go here
}
Short answer
The device pixel ratio is the ratio between physical pixels and logical pixels. For instance, the iPhone 4 and iPhone 4S report a device pixel ratio of 2, because the physical linear resolution is double the logical linear resolution.
Physical resolution: 960 x 640
Logical resolution: 480 x 320
The formula is:
Where:
is the physical linear resolution
and:
is the logical linear resolution
Other devices report different device pixel ratios, including non-integer ones. For example, the Nokia Lumia 1020 reports 1.6667, the Samsumg Galaxy S4 reports 3, and the Apple iPhone 6 Plus reports 2.46 (source: dpilove). But this does not change anything in principle, as you should never design for any one specific device.
Discussion
The CSS "pixel" is not even defined as "one picture element on some screen", but rather as a non-linear angular measurement of viewing angle, which is approximately of an inch at arm's length. Source: CSS Absolute Lengths
This has lots of implications when it comes to web design, such as preparing high-definition image resources and carefully applying different images at different device pixel ratios. You wouldn't want to force a low-end device to download a very high resolution image, only to downscale it locally. You also don't want high-end devices to upscale low resolution images for a blurry user experience.
If you are stuck with bitmap images, to accommodate for many different device pixel ratios, you should use CSS Media Queries or the HTML picture Element to provide different sets of resources for different groups of devices. Combine this with nice tricks like background-size: cover or explicitly set the background-size to percentage values.
Example
#element { background-image: url('lores.png'); }
#media only screen and (min-device-pixel-ratio: 2) {
#element { background-image: url('hires.png'); }
}
#media only screen and (min-device-pixel-ratio: 3) {
#element { background-image: url('superhires.png'); }
}
This way, each device type only loads the correct image resource. Also keep in mind that the px unit in CSS always operates on logical pixels.
A case for vector graphics
As more and more device types appear, it gets trickier to provide all of them with adequate bitmap resources. In CSS, media queries is currently the only way, and in HTML5, the picture element lets you use different sources for different media queries, but the support is still not 100 % since most web developers still have to support IE11 for a while more (source: caniuse).
If you need crisp images for icons, line-art, design elements that are not photos, you need to start thinking about SVG, which scales beautifully to all resolutions.
Device Pixel Ratio == CSS Pixel Ratio
In the world of web development, the device pixel ratio (also called CSS Pixel Ratio) is what determines how a device's screen resolution is interpreted by the CSS.
A browser's CSS calculates a device's logical (or interpreted) resolution by the formula:
For example:
Apple iPhone 6s
Actual Resolution: 750 x 1334
CSS Pixel Ratio: 2
Logical Resolution:
When viewing a web page, the CSS will think the device has a 375x667 resolution screen and Media Queries will respond as if the screen is 375x667. But the rendered elements on the screen will be twice as sharp as an actual 375x667 screen because there are twice as many physical pixels in the physical screen.
Some other examples:
Samsung Galaxy S4
Actual Resolution: 1080 x 1920
CSS Pixel Ratio: 3
Logical Resolution:
iPhone 5s
Actual Resolution: 640 x 1136
CSS Pixel Ratio: 2
Logical Resolution:
Why does the Device Pixel Ratio exist?
The reason that CSS pixel ratio was created is because as phones screens get higher resolutions, if every device still had a CSS pixel ratio of 1 then webpages would render too small to see.
A typical full screen desktop monitor is a roughly 24" at 1920x1080 resolution. Imagine if that monitor was shrunk down to about 5" but had the same resolution. Viewing things on the screen would be impossible because they would be so small. But manufactures are coming out with 1920x1080 resolution phone screens consistently now.
So the device pixel ratio was invented by phone makers so that they could continue to push the resolution, sharpness and quality of phone screens, without making elements on the screen too small to see or read.
Here is a tool that also tells you your current device's pixel density:
http://bjango.com/articles/min-device-pixel-ratio/
Boris Smus's article High DPI Images for Variable Pixel Densities has a more accurate definition of device pixel ratio: the number of device pixels per CSS pixel is a good approximation, but not the whole story.
Note that you can get the DPR used by a device with window.devicePixelRatio.
https://developer.mozilla.org/en/CSS/Media_queries#-moz-device-pixel-ratio
-moz-device-pixel-ratio
Gives the number of device pixels per CSS pixel.
this is almost self-explaining. the number describes the ratio of how much "real" pixels (physical pixerls of the screen) are used to display one "virtual" pixel (size set in CSS).
Device Pixel Ratio has direct correlation with Pixel density of the device.
Best concise description I could find:
Purpose of DPR is to keep consistent size of CSS pixels and therefore
consistent size of letters, symbols, images and everything else on
screen, across a variety of devices with different physical pixel
densities.
Source: screenresolutiontest