[csswg-drafts] Feature request: Page zoom level as environment variable (#12566)

simevidas has just created a new issue for https://github.com/w3c/csswg-drafts:

== Feature request: Page zoom level as environment variable ==
Imagine an environment variable that returns the current page zoom level for the web page in the (desktop) browser. The value would be a number (1 = 100%).

```css
env(page-zoom-level)
```

My use case:

I have a chart that is very wide, so the web page that contains this chart scrolls horizontally instead of vertically.

On initial page load (at 100% page zoom), I want the chart to be full height (the full viewport height). 

If the user changes the page zoom level, I want my chart to change size accordingly.

If the user changes the page zoom level and then navigates away and returns to my page, the web browser will retain that page zoom level (as it does for each website), so I want my chart to be sized accordingly (not full height).

This is difficult to implement. I made it work in Chrome and Firefox by storing the initial `devicePixelRatio` in `localStorage`, and then computing the DPR ratio:

```js
{
    if (!localStorage.getItem('DPR')) {
      localStorage.setItem('DPR', window.devicePixelRatio);
    }

    let update = () => {
      let dpr0 = localStorage.getItem('DPR');
      let dpr = window.devicePixelRatio;
      let zoom = dpr / dpr0;

      // the height of my chart adjusted for page zoom
      let height = zoom * window.innerHeight;
    };

    update();
    window.addEventListener('resize', update);
  }
```

You can see it in action at https://switch2.šime.eu.

This method does not work correctly in Safari because that browser does not update `devicePixelRatio` on page zoom. I could make it work with a different algorithm (e.g. comparing changes to `innerWidth` and `innerHeight`), but it’s difficult to make such code reliable. A CSS environment variable that just tells me the current page zoom level would really help me out.

The crux of my problem is that **I want my content to be full (viewport) height at page zoom 100%**. To me, this does not seem like an unusual thing to want. For some types of content (like my chart that scrolls horizontally), having the content automatically be full height initially provides a better UX, so I think my use-case is valid.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12566 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Sunday, 3 August 2025 00:26:48 UTC