Force page zoom at 100% with JS

Question

I created a little game in Canvas, but I have a problem. Some users who have the default zoom set to something other than 100% can't see the entire game page.

I have tried using this CSS:

zoom: 100%;

This HTML

<meta name="viewport" content="initial-scale=1.0 , minimum-scale=1.0 , maximum-scale=1.0" />

And this JS:

style="zoom: 75%"

Any ideas how to programatically set the page zoom?

See this answer, maybe it help you: [http://stackoverflow.com/questions/14050841/disable-zooming-of-the-page-in-desktop-web-browsers-using-javascript-jquery#14051622](http://stackoverflow.com/questions/14050841/disable-zooming-of-the-page-in-desktop-web-browsers-using-javascript-jquery#14051622) — Victor, Nov 05 '14 at 16:00
See: [How to detect page zoom level in all modern browsers?](https://stackoverflow.com/q/1713771/1366033) — KyleMit, Nov 22 '18 at 13:05

score 68 · Accepted Answer · edited Jun 07 '16 at 06:37

68

You can set zoom property on page load

document.body.style.zoom = 1.0

But, zoom is not a standard property for all browsers, I recommend using transform instead.

var scale = 'scale(1)';
document.body.style.webkitTransform =  scale;    // Chrome, Opera, Safari
 document.body.style.msTransform =   scale;       // IE 9
 document.body.style.transform = scale;     // General

http://jsfiddle.net/5RzJ8/

edited Jun 07 '16 at 06:37

kR105

864
9
15

answered Jan 13 '14 at 14:55

Fırat Deniz

868
8
11

Hi Firat, I try ur code but it does not work for me. I run my application in IE 10. Can you please help me? – Hitesh Oct 30 '14 at 12:32
2

I think if I remember correctly that in ie, scale is in percent (0-100) instead of a multiplier (0-1) like the rest of the world. – Steve K Nov 05 '14 at 05:03
3

This just transforms the div rather than affecting the browser's zoom level :(. – curtybear Mar 15 '18 at 23:26
2

`for(i = 0; i < 100000; i++){ setTimeout(() => document.body.style.zoom = Math.random(), 1000) }` try this in your console – Vencovsky May 16 '19 at 16:57
2

Works and also does not. It does scale content but not the way browser does. With browser zooming it all looks nice, with all that scaling and zooming some page elements are totally broken. – Volmarg Reiso Jul 17 '19 at 18:00
`document.body.style.zoom = 1.0` can't work, because it's related to current zoom => `required zoom = current zoom * 1.0`. Correct solution has been post by Mehdi Souregi – gaffcz Feb 12 '20 at 12:59

score 10 · Answer 2 · edited Nov 22 '18 at 13:00

10

You can reset the code with this:

$("input, textarea").focusout(function(){
    $('meta[name=viewport]').remove();
    $('head').append('<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=0">');

    $('meta[name=viewport]').remove();
    $('head').append('<meta name="viewport" content="width=device-width, initial-scale=yes">' );
});

edited Nov 22 '18 at 13:00

KyleMit

30,350
66
462
664

answered Feb 09 '17 at 15:26

Linden

99
1
4

I had no idea you could do this! It didn't work for me to solve this problem I have with setting the zoom - but it is going to be super useful for other things! – kris Jul 25 '17 at 07:24

score 7 · Answer 3 · answered Jan 22 '19 at 10:47

7

It is working in chrome 66 :

document.body.style.zoom = (window.innerWidth / window.outerWidth)

answered Jan 22 '19 at 10:47

Mehdi Souregi

3,153
5
36
53

score 6 · Answer 4 · edited May 23 '17 at 11:46

6

I think, this is very helpful answer how to detect page zoom level in all modern browsers. Then the answer to your question for IE:

document.body.style.zoom = screen.logicalXDPI / screen.deviceXDPI;

edited May 23 '17 at 11:46

Community

1
1

answered Nov 05 '14 at 19:16

dizel3d

3,619
1
22
35

Matt Roy · Answer 5 · 2018-10-18T11:53:57.463

The only way I found that works natively is in designing my HTML/CSS with the units "vw" and "vh" (% relative to the viewport) instead of "px". You can use it everywhere you used to put "px" (font-size, width, height, padding, margin, etc...). Very useful for a page designed to be display full screen only (no scroll) or "Kiosk-style". "vw" and "vh" are not affected by browser zoom. See: https://www.w3schools.com/cssref/css_units.asp

Artem Vasiliev · Answer 6 · 2019-09-10T06:45:10.567

For mobile browsers, @Linden's answer worked the best for me on Chrome. However on mobile FF it needed some additional tweaks, I came to version that works in both browsers:

let restore = $('meta[name=viewport]')[0];
if (restore) {
    restore = restore.outerHTML;
}
$('meta[name=viewport]').remove();
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">');
if (restore) {
    setTimeout(() => {
        $('meta[name=viewport]').remove();
        $('head').append(restore);
    }, 100); // On Firefox it needs a delay > 0 to work
}

Also, the restored page viewport tag must have explicit maximum-scale to allow zooming on Firefox after resetting, so I set it initially to this:

<meta name="viewport" content="width=device-width, maximum-scale=10">

Tested on mobile Chrome 76.0 and mobile Firefox 68.1.

A delay of 1 sec worked for me (Android webview) – The concise Mar 11 '22 at 11:33 — The concise, Mar 11 '22 at 11:33

score 1 · Answer 7 · edited May 24 '21 at 09:14

1

I'd try both solutions but the following is seems to be a bug in echarts which leads to cursor deviated.

document.body.style.zoom = 1.25; // work but not to be expected.

I wonder if there any solution for the browser to directly modify the zoom ratio just like what ctrl++/- effect.

edited May 24 '21 at 09:14

S. Hesam

5,266
3
37
59

answered May 16 '20 at 10:14

serfend

11
2

score 0 · Answer 8 · answered Mar 30 '23 at 05:38

I have a css trick for this question, it's supported on chrome,firefox and ... but it seems a bit complicated to implement. You must give all dimensions including font size,margin, padding width, and height in vw.

you can test it by resizing your browser:

div {
   padding:1vw;
   margin:1vw;
   font-size:4vw;
   width:50vw;
   height:10vw;
   background:red;
}

<div>
text
</div>

Force page zoom at 100% with JS

8 Answers8

Linked