title: Is there a way to specify absolute measurements for an object on the screen that actually work?
body: <p>I would like to set a <code>max-width</code> equal to the real size of a small object that may fit on most of the screens. My test results vary widely between screens, with a difference of about 5mm or more, either on the positive or the negative.</p>
  <p>I'm using the W3 example on <a href="https://www.w3.org/Style/Examples/007/units.en.html#:%7E:text=There%20is%20no%20restriction%20on%20which%20units%20can%20be%20used%20where.&amp;text=The%20so-called%20absolute%20units,has%20a%20high%20enough%20resolution" rel="nofollow noreferrer">EM, PX, PT, CM, IN…</a>, which I reproduced here:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.hint::before {
      content: "\270E";
      font-size: 2em;
      margin: 0 0 0 -1.25em;
      float: left;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="hint"&gt;
      &lt;p&gt;If you have a ruler handy you can check how precise your device
       is: here is a box of 1in (2.54cm) high: &lt;span style="display: block; height: 72pt; border-width: 1px; border-style: solid dashed; line-height: 24pt; font-size: 19pt; text-align: center; margin: 1.2em"&gt;↑&lt;br&gt;
       72pt&lt;br&gt;
       ↓&lt;/span&gt;
     &lt;/p&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I would like this absolute measurement to work on mobile devices (iOS, Android), using CSS only. I'm about to abandon the endeavour, but want to make sure that am not missing something here (I did read the article mentioned above in full and did tests on three different devices)</p>