https://github.com/xobotyi/zoom-level
A comprehensive cross-browser package that allow you to determine page's and element's zoom level
https://github.com/xobotyi/zoom-level
browser scale zoom zoom-detect zoom-level
Last synced: about 1 year ago
JSON representation
A comprehensive cross-browser package that allow you to determine page's and element's zoom level
- Host: GitHub
- URL: https://github.com/xobotyi/zoom-level
- Owner: xobotyi
- License: mit
- Created: 2019-05-31T07:47:40.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2024-09-12T00:54:36.000Z (over 1 year ago)
- Last Synced: 2025-03-01T00:19:01.914Z (about 1 year ago)
- Topics: browser, scale, zoom, zoom-detect, zoom-level
- Language: TypeScript
- Homepage:
- Size: 1.58 MB
- Stars: 23
- Watchers: 2
- Forks: 0
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# zoom-level
[](https://www.npmjs.com/package/zoom-level)
[](https://www.npmjs.com/package/zoom-level)
[](https://www.npmjs.com/package/zoom-level)
[](https://github.com/xobotyi/zoom-level/actions)
[](https://www.npmjs.com/package/zoom-level)
[](https://bundlephobia.com/result?p=zoom-level)
× **[LIVE EXAMPLE](https://codesandbox.io/s/zoomlevel-live-example-841ns)** ×
---
## ABOUT
This plugin allows you to detect browser's and separate element's zoom level.
It is [lightweight](https://bundlephobia.com/result?p=zoom-level) and has **no dependencies**!
## INSTALLATION
```bash
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 ES5 with CJS modules resolution;
- `module` field is pointing to ES5 with ES modules resolution;
- `esnext` field is pointing to ESNext with ES modules resolution;
Depending on your targets you may have to use [Webpack](https://webpack.js.org/) and/or
[Babel](http://babeljs.io/) to pull untranspiled version of package.
See some tips on wiring thing
up: [https://2ality.com/2017/06/pkg-esnext.html](https://2ality.com/2017/06/pkg-esnext.html)
## USAGE
```javascript
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);
```javascript
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.
## Related projects
- [react-scrollbars-custom](https://www.npmjs.com/package/react-scrollbars-custom) — The best
React custom scrollbars component. Allows you to customise scrollbars as you like it,
crossbrowser!
- [@xobotyi/scrollbar-width](https://www.npmjs.com/package/@xobotyi/scrollbar-width) — A tool
to get browser's scrollbars width.
- [@xobotyi/should-reverse-rtl-scroll](https://www.npmjs.com/package/@xobotyi/should-reverse-rtl-scroll)
— A tool detecting if RTL scroll value should be negative.