Hey HN! We do a lot of frontend testing, and one thing we find frustrating is the limited tooling available to observe how a URL renders on different viewports/devices simultaneously.<p>For example, we can use Chrome Inspector's "Device" previews, but we run into the following:<p>- Chrome doesn't keep those devices/viewports up to date, and adding new ones is pretty annoying (we've open sourced our collection of 180+ viewports/dimensions under MIT).<p>- You can’t see multiple viewports at once (and it’s cumbersome switching back and forth)<p>- When you notice a problem, there's no simple way to deep-link someone on your team to take a look at that viewport (likely have to open a Jira/Linear with the specifics)<p>- You can’t favourite viewports (for tracking the viewports specific to your project/client)<p>We’ve built a product with the goal of addressing these limitations (among others), and would love to hear your feedback.<p>Finally, feel free to use the open sourced data for your own projects :)
I am getting a "Mobile version not available" modal that wont go away on its own on desktop. I can trick it by making my browser full screen, refreshing, then resizing it back to a half sized window.
Targeting specific viewports is such a wrong way to go about it. Just resize your browser (or use the built in responsive design preview and freely resize that) to see if you reflow in a sane way. A single drag gets you hundreds if not thousands of different widths and aspect ratios tested.
Something doesnt seem right. This website loads fine on Chrome's inspector design previews, but looks broken here:<p><a href="https://viewport-tester.com/?url=https%3A%2F%2Fespncricinfo.com" rel="nofollow">https://viewport-tester.com/?url=https%3A%2F%2Fespncricinfo....</a>
Getting some CORS errors. E.g. <a href="https://www.gnome.org/" rel="nofollow">https://www.gnome.org/</a> fails to load fontawesome icons. And there's an interesting bug where opening mobile menu loads a page.
After clicking on four screen sizes.<p>> To continue enjoying full, unrestricted use, please sign up for updates.<p>I don't want to give you my email. Why are you forcing me to?
This reminded me of a very similar one but for the desktop from a few years back. Here you go;<p><a href="https://responsively.app" rel="nofollow">https://responsively.app</a><p>Source at <a href="https://github.com/responsively-org/responsively-app">https://github.com/responsively-org/responsively-app</a>