Preserve pixel alignment when zooming/resizing the webpage.
Monitor devicePixelRatio changes, adjusting CSS variable values so the rendered size rounds to the nearest integer.
// Force integer pixel value for --height on :root (auto-starts by default)
pixelPerfect('--height');
// Disable auto-start and control manually
const match = pixelPerfect('--height', { autoStart: false });
match.start(); // start listening and update immediately
match.stop(); // stop listening
match.update(); // force recalculation
match.restore(); // reset property to original value
// Use a specific element instead of :root
pixelPerfect('--height', {target: '#target'}); // by selector
pixelPerfect('--height', {target: document.querySelector('#target')}); // by element