JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 60910
  • Score
    100M100P100Q182295F
  • License MIT

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

Package Exports

  • zoom-level

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (zoom-level) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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.