title: How to set physical dimensions (like actual inches) for elements?
body: <p>My end goal is to display an image of the same exact size on every screen (yes, I really do need this for something). </p>
  
  <p>I started reading about how to get the user's screen size <a href="https://stackoverflow.com/questions/21680629/getting-the-physical-screen-dimensions-dpi-pixel-density-in-chrome-on-androi">here</a> - 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).</p>
  
  <p>I then remembered that css has physical dimension units for sizing elements and decided to test on my screen. I set dimensions like so:</p>
  
  <pre><code>&lt;div style = "background-color:black; height: 5in; width: 3in;"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>and then put a physical 3"x 5" (7.6cm x 12.7cm) flashcard against the screen.</p>
  
  <p>It was significantly off in size.</p>
  
  <p>Fun note - setting size in mm was ridiculously off - I expected to get the same results as with inches. </p>
  
  <p>With that said, is there a way to do what I need? </p>