Determining your browser's zoom percentage

koralarts

Karl Castillo

Posted on May 31, 2020

Determining your browser's zoom percentage

In most browsers specially desktop browsers, you're able to zoom in and out using CTRL/CMD++ or CTRL/CMD+-.

Most of the time, there's no problem as your website should take into account responsiveness but what if you want to update your website based on your user's browser zoom percent?

We can use Javascript to calculate the current browser zoom.

Math.round((window.outerWidth / window.innerWidth) * 100)
Enter fullscreen mode Exit fullscreen mode

Accessibility

Zooming is part of accessibility and having your website usable even when the user being zoomed in is important.

Gotcha

When you have your inspector open and it's docked to the left or right, the calculation becomes inaccurate as the innerWidth doesn't take into account the inspector.

Demo:

Best viewed in debug mode:

https://codepen.io/koralarts/pen/NWxKKdZ


How would you improve the code or do you have other ways on how you determine browser zoom?

πŸ’– πŸ’ͺ πŸ™… 🚩
koralarts
Karl Castillo

Posted on May 31, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related