7

My end goal is to display an image of the same exact size on every screen (yes, I really do need this for something).

I started reading about how to get the user's screen size here - and the answer seems to be that it's impossible (without calling an API which attempts to guess the actual device based on some params).

I then remembered that css has physical dimension units for sizing elements and decided to test on my screen. I set dimensions like so:

<div style = "background-color:black; height: 5in; width: 3in;"></div>

and then put a physical 3"x 5" (7.6cm x 12.7cm) flashcard against the screen.

It was significantly off in size.

Fun note - setting size in mm was ridiculously off - I expected to get the same results as with inches.

With that said, is there a way to do what I need?

Community
  • 1
  • 1
VSO
  • 11,546
  • 25
  • 99
  • 187

1 Answers1

6

In CSS, one inch does not equal one physical inch. It equals 96px.

This section of the spec may help you:

5.2. Absolute lengths: the cm, mm, q, in, pt, pc, px units

enter image description here

The absolute length units are fixed in relation to each other and anchored to some physical measurement.

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

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • 1
    Thanks, that helps. – VSO Jan 13 '17 at 13:05
  • 5
    @VSO What? How? This tells me nothing about how I might actually go about creating an element that is (e.g.) exactly 1 inch in width on every device that it is displayed! – Michael Feb 08 '18 at 00:51
  • 1
    @Michael Long story short - it is impossible to get physical dimensions. There are libraries which will detect your screen / device and try to adjust to that, if you REALLY need it, but they are all a pain. – VSO Feb 08 '18 at 16:09
  • 1
    Also, if you click on the link provided in the answer, there is a much more detailed explanation. This answer is meant to serve as an introduction. It's general in nature. I provided the link reference for those wanting more details. @Michael – Michael Benjamin Feb 08 '18 at 16:35