Pico Viewport Stats
This web component shows some statistics about 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.
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 of 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.
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="../pico-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.
It shows all numbers used to calculate the numbers shown, and some more.