title: My website is being zoomed in by Chrome and Firefox on Windows but I don't want to force users to change their browser configuration
body: <p>my website is being zoomed in by Chrome and Firefox on Windows. This happens because I have the Windows Display set to Medium-125%, and Chrome and Firefox have this terrible feature of adjusting the websites zoom according to this selection.
  In this way, despite having the browsers Zoom as 100%, the websites are shown as 125%.</p>
  
  <p>I used the following piece of code to be sure of what was happening, and yes, with Chrome and Firefox on Windows, I have the browser zoom on 100% and the output of the following is 125. And if I decrease the browser Zoom to 80%, the output will be 100, and the page looks like how it should.</p>
  
  <pre><code>var browserZoomLevel = Math.round(window.devicePixelRatio * 100)
  alert(browserZoomLevel)
  </code></pre>
  
  <p>Now:</p>
  
  <ul>
  <li>I don't want to change my Windows Display to Smaller-100% otherwise all icons will be really small, and I don't want to force future users of my website to change that as well, it wouldn't make sense!</li>
  <li>I don't want to make future users go to their browser configuration and change it to avoid this auto-zoom, it wouldn't make sense!</li>
  <li>Adding <code>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /&gt;</code> to my website <code>&lt;head&gt;</code> doesn't work.</li>
  </ul>
  
  <p>I need to make the website shows up as 100%, not 125%. So, I want the website to ignore that Windows configuration without doing the suggestions above (in the bullet points), I would rather prefer using CSS or js to accomplish that.
  Or in the worst case, for users with Windows Display set to Medium-125% I want to make the browser adjust to the Zoom 80%.</p>
  
  <p>I'm sure a lot of people experienced this issue but I don't find any solution to solve it.</p>
  
  <p>Can anyone help me?</p>