Skip to content
A comprehensive cross-browser package that allow you to determine page's and element's zoom level
Branch: master
Clone or download
Latest commit b573007 Jun 14, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github initial stuff; May 31, 2019
src Make it possible to use with SSR; Jun 5, 2019
.gitignore initial stuff; May 31, 2019
.npmignore initial stuff; May 31, 2019
.travis.yml initial stuff; May 31, 2019
CODE_OF_CONDUCT.md initial stuff; May 31, 2019
LICENSE Initial commit May 31, 2019
README.md readme May 31, 2019
package.json fixed dependencies; Jun 14, 2019
rollup.config.js babel; Jun 14, 2019
tsconfig.json rollup config; May 31, 2019

README.md

zoom-level

× LIVE EXAMPLE ×

ABOUT

This plugin allows you to detect browser's and separate element's zoom level.
It is lightweight and has no dependencies!

INSTALLATION

npm install zoom-level
# or via yarn
yarn add zoom-level

You can even include it with a standalone <script> tag from UNPKG CDN

<script src="https://unpkg.com/zoom-level" />

<script>
  (() => {
    window.zoomLevel.zoomLevel(); // 1
  })();
</script>

USAGE

import zoomLevel from "zoom-level";

zoomLevel(); // 1;

window.addEventListener("resize", () => {
  zoomLevel(); // will return current browser's zoom level
});

Or, in case you want to detect separate element's zoom level (they can use own zoom CSS property which stacks with browser's one);

import { elementZoomLevel } from "zoom-level";

const zoomedBlock = document.createElement("div");
zoomedBlock.style.zoom = 0.5;
zoomedBlock.style.width = "150px";
zoomedBlock.style.height = "150px";
zoomedBlock.style.margin = "32px";
zoomedBlock.style.padding = "32px";
zoomedBlock.style.background = "rgba(0,0,0,.05)";
zoomedBlock.innerText = "Lorem ipusm dolor sit amet";
document.appendChild(zoomedBlock);

elementZoomLevel(zoomedBlock); // 0.5;

window.addEventListener("resize", () => {
  elementZoomLevel(zoomedBlock); // if you zoom to 200% it'll be 1
});

TESTS

Sadly i have no idea how to manage testing of this package, due to there is no known ways to control browser's zoom level.
If you know how to do it - please let me know.

You can’t perform that action at this time.