react-scaling-fix

A lightweight React component that automatically fixes scaling issues based on device pixel ratio (DPI/zoom settings).

Installation

npm install react-scaling-fix

Usage

Simply import and include the ScalingFix component anywhere in your React application (typically in your root component or App.js):

import { ScalingFix } from 'react-scaling-fix';

function App() {
  return (
    <>
      <ScalingFix />
      {/* Your other components */}
    </>
  );
}

export default App;

What it does

The component automatically detects the device pixel ratio and applies appropriate zoom adjustments to ensure consistent rendering across different display settings:

• DPR ≥ 1.75: Applies 0.571x zoom with 175% viewport compensation
• DPR ≥ 1.5: Applies 0.666x zoom with 150% viewport compensation
• DPR ≥ 1.25: Applies 0.8x zoom with 125% viewport compensation
• DPR < 1.25: Standard 100% viewport (no zoom adjustment)

The component also listens for window resize events and automatically reapplies the scaling fix when needed.

Features

• ✅ Zero configuration required
• ✅ Automatically handles window resize events
• ✅ Logs device pixel ratio and applied settings to console
• ✅ Cleans up event listeners on unmount
• ✅ Lightweight with no external dependencies (only React)

How it works

The component uses React's useEffect hook to:

1. Detect the current device pixel ratio
2. Apply CSS zoom to the HTML element
3. Compensate body dimensions to maintain proper viewport sizing
4. Re-apply fixes on window resize events

Browser Compatibility

Works in all modern browsers that support:

• CSS zoom property
• window.devicePixelRatio
• Viewport units (vw, vh)

License

MIT © Hariprasath Y S

Author

Hariprasath Y S

Keywords

react, scaling, dpi, css, zoom, device-pixel-ratio, display-scaling