Absolute sizing using CSS

Question

I know there are some absolute-size units available in CSS. For example, cm, in, mm... But when I use them in my webpage, they are rarely honored.

The information about screen physical size and pixel resolution should be available from the EDID - so the browser can access them and calculate the amount of pixels in 1 cm on that particular device. I am talking about ordinary CRT/LED/Plasma screens, not projectors.

I want ot use it with mobile devices. A common standard is for every touch target to be at least 9 mm in size. But when I use height: 9mm in my CSS code, then the real size is about 3 mm on my HTC Desire HD.

So how can I make browsers display elements using the absolute size?

score 2 · Answer 1 · answered Dec 25 '12 at 21:32

You can't. For whatever reason, browsers on mobile devices will uniformly tell you that an element sized with a width of 1in ("one inch") is 96 pixels wide. It doesn't matter what the actual resolution is; that's what they all say.

The only way to approach the problem without losing your mind is to give all responsibility for adequate sizing of "virtual pixels" to the device manufacturers (and device software suppliers). In other words, you must trust Apple, Google, Samsung, LG, HTC, Motorola, etc to supply the public with devices that make your 16px text be readable on whatever device the user is looking at, regardless of how many real pixels are involved with a single 16px glyph.

Sometimes, you lose; the new iPad Mini is a good example, because it reports an identical screen size as an iPad 2 but has a much smaller screen. That means that your 16px that's nice and clear on an iPad 2 is pretty small on an iPad Mini. It's virtually impossible for your web page to figure out that it's on an iPad Mini vs. an iPad 2 (by design! Apple made it that way on purpose) so the net effect is that the hapless purchaser of an iPad Mini has been ill-served by the manufacturer.

By contrast, a Nexus 7 tablet has higher actual screen resolution than an iPad Mini, but it reports to your web page a smaller screen size. That means that your 16px text on that device looks great — the owner of a Nexus 7 has been well-served by that manufacturer.

(You can of course provide tools to allow users to tweak the layout. For a responsive site, due to various browser peculiarities (bugs) it's pretty hard to make a site work well that's pinchable/zoomable with familiar mobile device gestures.)

Do you have any reference about 96dpi being the standard on mobile devices? I found resources only about 96dpi being standard on Windows. I would like to cite that reference in my thesis. — Jakub Zaverka, Dec 28 '12 at 17:26
I'll look around; I've read various blog posts about it, and it's certainly easy to demonstrate empirically. And note that it's explicitly **not** 96dpi in reality - the fact is that what's happening is that the devices treat `1in` as meaning `96px`, regardless of how big the pixels actually are. — Pointy, Dec 28 '12 at 17:27
So basically, if I want 9mm on a web page, I need to know what device I am on. But that information is not included in http requests - e.a. IPad and iPad mini. So I am screwed - there is no way I can have the actual dpi, other than asking the users about their devices. — Jakub Zaverka, Dec 28 '12 at 17:32
And relying on 96dpi just doesn't seem right - about 99% mobile devices have the dpi much higher. Too bad users' fingers cannot scale to 96dpi, too. :-) — Jakub Zaverka, Dec 28 '12 at 17:34
Yes, it is a bizarre situation, but that's the reality. Most modern devices will tell you the "device pixel ratio", but that only reports the ratio between actual screen pixels and the "virtual" pixel (`1px` in CSS). Still does not help you with the real screen size however. — Pointy, Dec 28 '12 at 17:37

score 1 · Answer 2 · answered Dec 25 '12 at 21:33

That depends heavily on the device settings. In many cases - for "compatibility reasons" - true interoperability has been traded against getting the product into the market.

Or in other words: Device vendors fixed websites for their clients so they can surf "as they know it".

Your Desire HD:

Diagonal cm (in): 11 (4.3)

Resolution: 480×800

ppcm (PPI): 85 (217)^*

CSS pixel ratio: 1.5

^* Approximate calculation based on given display size.

If you see the list, you can imagine that this differs per each device. So you can not trust the device itself.

If you want to solve this, you need to offer your users a way to configure it so that you can adopt. Some vendors/browsers offer header that tell these devices to do the real thing. This all depends and I don't have a good resource at hand to solve this easily and globally. I would start with researching the different models and their browser software and then create a matrix if some common procedures are available and if they do work together.

Until then I just would ask the user, use realtive settings but do an adopted setting to the body element based on users preference.

score 1 · Answer 3 · answered Dec 25 '12 at 22:25

There are two basic things that make 9mm different from a physical measure of 9 millimeters.

First, in display devices, the anchor unit (as described in CSS Values and Units Module Level 3) is normally the pixel, and the mm unit is interpreted so that the equation 1in = 25.4mm = 96px is satisfied. (Even in print media, where mm should in principle be anchored to the physical millimeter, it deviates from it somewhat.) There is nothing you can do about this.

Second, in mobile devices, browsers usually automatically scale pages. The reason is that otherwise most pages would behave very badly, since they have been designed for larger screens (even in terms of the number of pixels in each direction). This can be prevented using a tag like

<meta name="viewport" content="width=device-width, initial-scale=1">

This should be used only if the page has really been designed to adapt to various viewport sizes, including small sizes.

score 0 · Answer 4 · answered Dec 25 '12 at 21:30

If these real-world measurements are ever reliable they will only ever be so when used for print formats. Anything electronic will think in terms of pixels, not what those pixels translate to in terms of real-world measurements. What are cm and mm supposed to mean for instance when you plug your device into a projector or an external monitor with a different resolution and DPI?

Which device keeps tracks of what the mm and cm translate to? The display device or the device sending the display data? It's just too messy. RL measurements are for print-only and even there they can be a bit dicey in my experience. At least my experience as of a few years back it was dicey.

score 0 · Accepted Answer · answered Jan 08 '13 at 12:18

I figured a way: most browsers send the device type along the HTTP request in user-agent header. Based on that information, I then can on the server find out the real DPI and send it back along in the response (as a modified CSS, for example).

However, it is costly to keep and maintain a database of devices to get the precise DPI. I ended up using approximate DPI from a set of common parameters. The 1mm in not constant in that case, but the differences should be minimized (generally).

Absolute sizing using CSS

5 Answers5