How to define a font size that scales with browser zoom level?

Question

For my webapp I'm attempting to create a div which maintains the same size regardless of zoom level. That is, if I measure the div with a real-world ruler and it is 3 inches wide, then regardless of how far I zoom in or out, it will always be 3 inches wide.

I've noticed that if I define the font-size of the root html document, then I can use the relativistic rem for that div and all of its child elements.

The closest I've gotten so far is setting font-size: 1vh; on the html element. Then, whenever I use rem units, the div and its contents stay the same size regardless of zoom level, which is perfect.

The only issue with this solution is that it scales with viewport height. That is, if you make your window shorter, the element will decrease in height. Similarly, if you make the window taller then the element will increase in height.

This is bad, because for all my users regardless of their monitor size I want this item to be the same size. That is, it should be 3 inches wide for everyone regardless of their viewport width, height, monitor size, or whatever.

The only thing I could think of to solve this is to somehow detect browser zoom levels and then use Javascript to modify the html element's font-size property, but that approach seems extremely finicky and not very cross-browser in how well it works.

Answer 1

I figured this out and it seems to work. Likely going to use this unless someone comes up with a better solution:

function scaleFontSize() {
  let scaledFontSize = (16 / window.devicePixelRatio) + "px";
  
  document.documentElement.style["font-size"] = scaledFontSize;
}

scaleFontSize();

window.addEventListener('resize', scaleFontSize, true);

Answer 2

would clamp() be helping you here ? on its own or mixed with your window.devicePixelRatio ?

while awaiting for a feed back in the comment section, i set here a couple of example

html {
font-size:clamp(10px, 8vw, 0.35in); 
}
body {
width:20rem;
margin:auto;
text-align:justify;
}

<h1>HTML Ipsum Presents</h1>

<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em>  Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis
  tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<h2>Header Level 2</h2>

<ol>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
</ol>

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis
    elit sit amet quam. Vivamus pretium ornare est.</p>
</blockquote>

<h3>Header Level 3</h3>

<ul>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
</ul>

<pre><code>
#header h1 a {
  display: block;
  width: 300px;
  height: 80px;
}
</code></pre>

• js

function scaleFontSize() {
  let scaledFontSize = (8 / window.devicePixelRatio) + "vw";
  let doc = document.querySelector('html');
 
  doc.style.setProperty('--Device',  scaledFontSize);
}

window.onload=scaleFontSize;
 
// window.addEventListener('resize', scaleFontSize, true); No need , pixel ratio remains the same .

html {
font-size:clamp(10px, var(--Device, 10vw), 0.35in); 
}
body {
width:20rem;
margin:auto;
text-align:justify;
}

<h1>HTML Ipsum Presents</h1>

<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em>  Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis
  tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<h2>Header Level 2</h2>

<ol>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
</ol>

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis
    elit sit amet quam. Vivamus pretium ornare est.</p>
</blockquote>

<h3>Header Level 3</h3>

<ul>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
</ul>

<pre><code>
#header h1 a {
  display: block;
  width: 300px;
  height: 80px;
}
</code></pre>