How to reset browser zoom level to '100%' when route change in a Reactjs app

Question

I read a lot of questions about resetting zoom level in this community but none of them couldn't resolve my problem. Somebody offered to use from zoom property of CSS, but the problem of this approach is:

When a user changes the browser page's zoom level, this level is considered 100% by the CSS even the real browser level is 500%. Somebody offered to use from scale property of CSS, but the problem of this approach is the same as using the zoom property issue. Also, some different solutions were offered but none of them couldn't resolve my problem.

Then I decided to raise a keyboard event (pressing ctrl + 0 buttons) right after any route changes to reset the browser zoom level to 100% by this code:

shouldComponentUpdate(nextprops) {

  window.addEventListener('keypress', (event) => {
    console.log("event", event);
  });


  var keyEvent = new KeyboardEvent('keypress', {
    altKey: false,
    bubbles: true,
    cancelBubble: false,
    cancelable: true,
    charCode: 0,
    code: "Digit0",
    composed: true,
    ctrlKey: true,
    currentTarget: null,
    defaultPrevented: true,
    detail: 0,
    eventPhase: 0,
    isComposing: false,
    isTrusted: true,
    key: "0",
    keyCode: 48,
    location: 0,
    metaKey: false,
    repeat: false,
    returnValue: false,
    shiftKey: false,
    type: "keypress",
    which: 48
  });
  window.dispatchEvent(keyEvent);

  return nextprops?.location?.pathname != this.props?.location?.pathname;
};

Now when I change the page the console.log("event", event); run but the browser zoom level doesn't reset.

Your solution for simulation the + or - buttons was awesome, although it doesn't work but it is so creative. I upvoted your question. good luck. — AmerllicA, Jun 07 '21 at 02:56

score 2 · Answer 1 · answered Jun 07 '21 at 02:54

Actually, it is not possible in most browsers that Google Chrome is one of them. you can check this answer to get more detail about it.

But about your solution, it is very creative solution but you should consider that pressing ctrl+0 is not key pressing, it is a command, so you cannot catch it in your JavaScript execution level. it is in browser execution level.

Because of using Linux or Windows you are assuming CTRL is a key but if you have a macOS device you will understand the actions behind the command key (⌘) could not be captured in JavaScript execution level (like Windows key ⊞ in non-apple devices) but the CTRL key (⌃) could be captured because it is a key not metaKey. for more information see this question.

Totally, it means you don't have any access to control browser buttons.

score 2 · Answer 2 · answered Jun 20 '21 at 14:23

2

in the ComponentDidMount() or useEffect of your Route you add this line

document.body.style.zoom = "100%";

answered Jun 20 '21 at 14:23

Salah ED

535
7
17

This doesn't change browsers zoom level. – gre_gor Oct 25 '22 at 05:34
try to write it in console of your browser, put "10%" and you will see it works – Salah ED Oct 25 '22 at 09:19
I did. It didn't work. – gre_gor Oct 25 '22 at 09:35
what browsed are you using, i'm using chrom – Salah ED Oct 25 '22 at 10:19
Chrome. Do you know that browser zoom and CSS zoom are not the same thing? OP already said they tried CSS zoom and explained why it doesn't work. – gre_gor Oct 25 '22 at 10:28

score -3 · Answer 3 · answered Jun 18 '21 at 11:14

Although, you cannot change the browser behavior . You can always use transform to make the page default zoom.

 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

How to reset browser zoom level to '100%' when route change in a Reactjs app

3 Answers3