Pico Viewport Stats

This web component shows some statistics about the viewport.

Initially this web component was triggered by seeing picostitch.com on a big screen, a very wide screen. I had learned from multiple sources that the width of a website to stay readable, should not extend roughly the width of fifty characters, I had styled picostitch accordingly. Then I had a lot of space on the site, right and left.
Remembering one of my favourite quotes I thought it would be an awful waste of space, so I built this element to visualize this in numbers and eventually mark the start of doing something about it and make the whitespace useful.

So?

The intersting thing, that I also wanted to understand better is how the different zooms you can apply effect a site. Try out the pinch zoom and the browser zoom (that's how I called them).

Pinch zoom is the zoom when you use two fingers on the trackpad or on a touch screen to zoom the webpage.
Content zoom is the zoom that you can apply by clicking the CTRL and +/- key combination, which has an effect mainly on the font size.

If the browser supports finding out those numbers, you will also see them in the widget.
Do you see the numbers change? This taught me a lot about how browsers see the site, use the space on the site and handle zoom. Hint: not all zoom is "visible" and detectable via JavaScript, which makes sense. Go and explore!

A purely embedded version

The "widget" you see below, is a web component, using Shadow DOM and ES Modules and more. To render it I just wrote the following:

<script type="module" src="https://corsproxy.io/?https%3A%2F%2Fwolframkriesing.codeberg.page%2Fpico-elements%2Fpico-viewport-stats.js"></script>
<pico-viewport-stats></pico-viewport-stats>
    

It then calculates the according dimensions and renders them in a (hopefully) easy to understand view, which I am planning to embed on my blog to make those numbers actionable.

The debug version

this is the same as above, just one aditional attribute is added to the HTML tag "debug", see the code.

      <pico-viewport-stats debug></pico-viewport-stats>
    

It shows all numbers used to calculate the numbers shown, and some more.