title: Is a CSS pixel really an absolute unit? That is, is 1 inch = 96px true?
body: <p>The official <a href="https://www.w3.org/TR/2016/CR-css-values-3-20160929/#px" rel="noreferrer">W3C documentation</a> says:  </p>
  
  <blockquote>
    <p>1 px = 1/96th of 1 in </p>
  </blockquote>
  
  <p>In my previous 18.5 inch screen, the <code>screen.width</code> was <code>1367 px</code> and the screen width in inches was <code>14 inches</code>. By the W3C formula:</p>
  
  <blockquote>
    <p><code>14 * 96 px = 1344 px</code></p>
  </blockquote>
  
  <p>The W3C formula deviated by <code>20/14 px per inch</code>. Since the deviation is too low, and <code>1 inch</code> on my screen was <code>97.4 px</code> I accepted the W3C formula, and believed that a CSS pixel is an <code>absolute unit of measure</code>, meaning it is always equal to <code>0.75 pt</code> (a physical unit).  </p>
  
  <p>This week I bought a 21.5 inch, full HD screen, which has width <code>19 inches</code> and <code>screen.width</code> is <code>1920 px</code>. So now <code>1 inch</code> on my screen is:</p>
  
  <blockquote>
    <p><code>1920/19 ~ 101 px</code></p>
  </blockquote>
  
  <p>Not only this, my friend's screen is 24 inches, and has the same 1920 x 1080 resolution. Both 24 inches and 21.5 inches cannot correspond to same amount of CSS pixels.</p>
  
  <p>So now, on my screen, CSS pixels is not an absolute unit of measurement. And everything is relatively smaller on my screen. Even that, now I get deluded by my font sizes. When I find 16 px as minimum readable font on my screen, it is actually larger on smaller screens. Because <code>16 px</code> on my screen is physically the same in centimeters as <code>14px</code> in centimeters on my previous smaller screen. I am designing my websites wrong and I am not a good front end developer anymore.</p>
  
  <p>So the question:  </p>
  
  <ul>
  <li>Is a CSS pixel really an absolute unit? That is, is 1 inch = 96 px true?</li>
  </ul>