Monitoring the zoom level

In CSS, the left position, if it is expressed in percent for a DOM superior level, is computed based on the width of the viewport.

When the magnification level of the page changes, the width of the viewport remains the same, and also the apparent position of the element with the CSS property left set in percent, while the actual position in pixels will change.

For example, using two elements for marking, one with the absolute position of 0px and one with the absolute position of 10% we can compute the new magnification level like this:

initialBeaconDistance = clientXPosition(beaconTwo) - clientXPosition(beaconOne);

begin onMouseWheel:
        newBeaconDistance = clientXPosition(beaconTwo) - clientXPosition(beaconOne);
        zoom = initialBeaconDistance / newBeaconDistance;
end onMouseWheel