Force Chrome Zoom to 100%

Question

In a product we are creating there is a piece of functionality which doesn't function perfectly in Chrome unless you are at 100% zoom. Chrome is not a major target for our product, we expect less than 5% of our users to use it, so we can't allocate a significant number of hours to fixing this feature for zoomed Chrome (which we expect to be a very low percentage of Cusers users).

The functionality is a scrolling widget that shows them a limited view of a list of items at a time. In FF, IE, and 100% zoomed Chrome it scrolls one item per click of the left or right arrows. In Chrome that is not 100% zoomed, it scrolls .5 to 1.5 items per click.

We've also found some minor graphical glitches in Chrome at a zoom level different than 100%.

In our testing, we found that Chrome would sometimes change zoom level when entering our site, seemingly automatically. We would ensure the zoom was 100% before going to our test site, but as soon as we hit our test site, zoom changed to 90%.

Is there a way to programmatically force Chrome to 100% zoom?

http://stackoverflow.com/questions/9441557/how-to-increase-browser-zoom-level-on-page-load — Ralf de Kleine, Mar 29 '13 at 14:30
@RalfdeKleine - I absolutely agree with the accepted answer there. I'd love to have the time to get this done **right**. Unfortunately, we can't justify charging the client to fix this bug the right way, not when it works fine for their specific target browsers (at all zoom levels). — Jeff, Mar 29 '13 at 15:11
Pretty late to ask something on this thread, but is the real text size on physical devices close to their size when displaying in 100% zoom in chrome? Or they're smaller in real scale? I mean, there must be a reason that the inspect tool auto-adjusts zoom value. – — AliAndArdDev, Mar 17 '23 at 15:59

Tomer Wolberg · Accepted Answer · 2017-07-26T11:53:33.257

JS:

$(document).ready(function () {
    document.body.style.transform = "scale(" + (window.innerWidth) / (window.outerWidth) + ")";
    document.body.style.width = 100 * (window.outerWidth) / (window.innerWidth) + "%";
});

$(window).resize(function () {
    document.body.style.transform = "scale(" + (window.innerWidth) / (window.outerWidth) + ")";
    document.body.style.width = 100 * (window.outerWidth) / (window.innerWidth) + "%";
});

CSS:

body{
  transform-origin:0 0;
  position:absolute;
  top:0;
  left:0;
  right:0;
  margin:0;
  padding:0;
}

body:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
body body body body...

Update:

If the content of your webpage is on the left use transform-origin: 0 0; if it's on the right use transform-origin: 100% 0; and if it's in the center use transform-origin: center 0; If you have content in few places or x pixels from left/top instead of scaling the body scale each div separately and fit the transform-origin to it's place and than resize it's width and height like this:

document.getElementById("id").style.width = document.getElementById("id").style.width * (window.outerWidth) / (window.innerWidth) + "px";
document.getElementById("id").style.height = document.getElementById("id").style.height * (window.outerWidth) / (window.innerWidth) + "px";

Force Chrome Zoom to 100%

1 Answers1