Zoom a browser with JavaScript

Question

I'm curious if there's any way to force a window zoom or change the reference pixel size. I know you can get a reported zoom level with window.devicePixelRatio

We've been using rem and changing the root html font-size, but want to use pixels, since DPI and accessibility are compensated for by the browser's reference pixel, and most measurements like clientWidth and drag touch events are measured in px and we're using additional math to just scale it into rem for no reason!

Thanks

You can zoom the page like this `document.body.style.zoom = 1.2` keep chaging 1.2 to 1.3, 1.4 etc.., Not sure if it gets your desired results — Panther, Sep 27 '16 at 03:33
1 comment; transform is [completely supported](http://caniuse.com/#feat=transforms2d)(at least in main browsers, blah, blah, blah), and it includes a scale option. Use it as you may. — David Archibald, Sep 27 '16 at 04:09
Possible duplicate of [Changing the browser zoom level](http://stackoverflow.com/questions/1055336/changing-the-browser-zoom-level) — David Archibald, Sep 27 '16 at 04:09

score 1 · Answer 1 · answered Sep 27 '16 at 03:47

1

I've used zoom-in using Javascript. I'm simply using document.body.style.zoom=1.5;

Here is a fiddle you can see. Perhaps this solves your problem.

answered Sep 27 '16 at 03:47

Divyanshu Maithani

13,908
2
36
47

score 0 · Answer 2 · answered Sep 27 '16 at 04:17

The css zoom attribute is not supported, but transform is supported, though it is probably still better to use a library, transform: scale(%); is the easiest way.

p {
  animation: scale 5s infinite;
}

@keyframes scale {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(.1);
  }
  100% {
    transform: scale(1);
  }
}

<p>I'll grow larger and smaller<p>

Zoom a browser with JavaScript

2 Answers2