Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

zoom-level

xobotyi262.7kMIT2.5.0TypeScript support: included

A comprehensive cross-browser package that allow you to determine page's and element's zoom level

zoom, zoom-level, browser, zoom-detect, scale

readme

zoom-level

NPM version NPM weekly downloads License Types definition Codacy Code Grade

× LIVE EXAMPLE ×

❤️Please consider starring this project to show your love and support.🙌

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

INSTALLATION NOTE:
This lib is written in ES6+ and delivering with both, transpiled and untranspiled versions:

  • main field of package.json is pointing to transpiled ES3-compatible version with CJS modules resolution;
  • module field is pointing to transpiled ES3-compatible version with ES modules resolution;
  • esnext field is pointing to the ES6+ version with ES modules resolution;

Depending on your targets you may have to use Webpack and/or Babel to pull untranspiled version of package.
See some tips on wiring thing up: https://2ality.com/2017/06/pkg-esnext.html

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.

changelog

2.5.0 (2020-05-21)

Features

  • add patreon funding link (7e444f5)

2.4.1 (2020-03-18)

Bug Fixes

  • make rollup config file cjs-compat. (7ea9c3a)

2.4.0 (2020-02-16)

Bug Fixes

  • lint-staged commands been using the tslint; (6f203b4)

Features

  • terser now minifies all the code via rollup plugin; (5d5a666)

2.3.1 (2020-01-30)

Bug Fixes

  • remove everything from dist packages excepting dist code. (aac7e06)

2.3.0 (2020-01-28)

Features

  • added related projects section to readme; (203bc60)

2.2.1 (2020-01-27)

Bug Fixes

2.2.0 (2020-01-27)

Features

  • try new travis structure based on jobs (5379ba8)

2.1.0 (2020-01-27)

Bug Fixes

  • add semantic release plugins to dev dependencies; (d7dd63d)

Features

  • add eslint (13a43f5)
  • now releases put under control of semantic-release; (b93d9e6)
  • replace all badges with badgen.net ones; (9432dc3)