Package Exports

zoomreta
zoomreta/dist/bundle.js

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 (zoomreta) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Zoomreta

Zoomreta is an npm package for detecting zoom level in a browser. It uses the window.visualViewport API where available with a fallback method. Features:

Accurate Zoom Detection: Leverages the `visualViewport` API where available for precise zoom level measurement, with a fallback method for older browsers.
Multiple Zoom Level Properties: Provides detailed information about the zoom level, including:
- Percentage
- Device pixel ratio
- Viewport scale
- Effective zoom (combined viewport and system zoom)
Display switch detection: Detect changes in zoom level if display switched (considering )
Retina Display Detection: Accurately identifies Retina (high-DPI) displays, even when system and browser zoom adjustments are applied.
Change Monitoring: Allows you to monitor zoom level changes and react dynamically using a callback function.
Customizable: Offers options to tailor zoom level detection to your specific needs:
- Alternative zoom calculation
- Selection of specific zoom properties to return

Installation

You can install zoomreta using npm:

npm install zoomreta

Usage

In Node.js

To use zoomreta in a Node.js environment:

import { getZoomLevel } from 'zoomreta';

const zoomLevels = getAdjustedZoomLevel();
console.log(zoomLevels.zoomLevelPercentage); // 100 (default zoom level percentage), 125, 150, etc.
console.log(zoomLevels.effectiveZoomLevel); // Combined viewport and system zoom

In the Browser

To use zoomreta in a browser environment:

Include the zoomreta script in your HTML file (example):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Zoom Level Test</title>
</head>
<body>
  <script src="node_modules/zoomreta/dist/bundle.js"></script>
  <script>
    console.log('Zoom Level:', zoomreta.getZoomLevel());
  </script>
</body>
</html>

Or try in combination with test project:

API

`getAdjustedZoomLevel`

Retrieves the current zoom level properties. Properties examples:

1. Get default zoom properties

const zoomLevels = getAdjustedZoomLevel();
console.log(zoomLevels);

2. Get zoom level and `isRetina`

const zoomLevels = getAdjustedZoomLevel({ includeRetina: true });
console.log(zoomLevels);

3. Get zoom level and `zoomViaWindowDevicePixelRatio`

const zoomLevels = getAdjustedZoomLevel({ includeZoomViaWindow: true });
console.log(zoomLevels);

4. All properties

const zoomLevels = getAdjustedZoomLevel({ includeRetina: true, includeZoomViaWindow: true });
console.log(zoomLevels);

`checkForChanges`

Monitors for changes in zoom level and executes a callback when changes are detected.

callback (function): The function to execute when zoom level changes are detected.
interval (number): The interval in milliseconds (default: 500).
options (object):
- oncePerStateChange (boolean):
  - If `false` (default), the callback fires on every zoom level change within the interval.
  - If `true`, the callback fires only once when transitioning between zoomed and not zoomed states.
- useAlternativeZoomCalculation (boolean): If `true`, an alternative (probably less accurate) zoom calculation is used.
- includeRetina (boolean): Return information is retina display
- includeZoomViaWindow (boolean): If `true`, includes the `zoomViaWindowDevicePixelRatio` property (zoom level based on window device pixel ratio) in the returned zoom level information.

Contributing

Contributions are more than welcome! Please open an issue or submit a pull request for any changes you would like to see.

License

This project is licensed under the ISC License.

zoomreta