The answer turned out to be a bit tedious so I tried fixing that. Say hello to Viewportmarklet:
How does it work?
The tool is build around the assumption that you need an actual letter m on your canvas in the base font size. The width of that letter m is what the browser will use as 1 em.
When working on a frontend project I found myself struggling with the sites current viewport width in em and in pixels. To save myself and others from demotivation problems I build a small tool that helps you to wrap your head around em usage.
Check out the repository on Github.
Help me improve it
I know the code is not great but for now it’s helping me a great deal. If you see any improvements or have any feedback, fork away or let me know in the comments!