Show HN: Test your website on 180+ device viewports (with multi-device mode) (viewport-tester.com)
For example, we can use Chrome Inspector's "Device" previews, but we run into the following:
- 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).
- You can’t see multiple viewports at once (and it’s cumbersome switching back and forth)
- 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)
- You can’t favourite viewports (for tracking the viewports specific to your project/client)
We’ve built a product with the goal of addressing these limitations (among others), and would love to hear your feedback.
Finally, feel free to use the open sourced data for your own projects :)
52 comments
[ 5.2 ms ] story [ 127 ms ] thread> To continue enjoying full, unrestricted use, please sign up for updates.
I don't want to give you my email. Why are you forcing me to?
https://viewport-tester.com/?url=https%3A%2F%2Fespncricinfo....
Now I wont even check it out because I didnt get that first impression on my phone. I will just forget it.
Just my 2c
I noticed another possible bug. When trying it out on your website, it reports an "Invalid URL" error.
https://viewport-tester.com
The detailed text on the modal says: We can only load URLs that pass standard pattern checks.
Edit: even if you click "Request mobile version", the modal is there
In those cases, it's helpful for us to really quickly choose from a list the device, and view the site. That way, we don't need to know the exact dimensions of the device, and can also test a possible fix for that device against other viewports.
https://responsively.app
Source at https://github.com/responsively-org/responsively-app
There's not yet a way to resize the viewport and take another screenshot without loading the page again.
There's not yet a way to store (h,w,scale,showbrowserchrome) configurations in a YAML file; but shot-scraper does work in GitHub Actions.
Some web testing tools can record a video of a test session and save it if there's a test failure.
E.g. Playwright defaults to an 800x600 viewport for test videos to retain-on-failure or record only if on-first-retry: https://playwright.dev/docs/videos
Something like Cloudflare Browser Isolation - which splits the browser at an interface such that a Chrome browser server runs on a remote server and a Chrome client runs locally - might make it easier to compress recordings of n x test invocations (in isolated browsers or workers)
Use case: add which few of these to DevTools. IDK if there's a YAML parser in DevTools already, otherwise JSON + jq should work somehow
awesome-chrome-devtools: https://github.com/paulirish/awesome-chrome-devtools
We plan to address this in the future, but at the moment, Viewport Tester works in a similar way to Chrome's native Device Inspector: it resizes the viewport to the exact dimensions.
This is meant as a light hearted question: how could you have gotten this far making a viewport tester and the mobile website development journey without understanding and dealing with the most important and disruptive behavior in mobile viewports? Like I get that this is just a free project and it does what it does.
* with and without the keyboard focused,
* in each of the preference states (e.g. tab bar vs single tab for iOS, which influences whether there’s a compact address/button bar on the bottom or an address bar at top plus a button bar at bottom), and
* both of those in portrait and landscape
We have a specific plan on making this work on mobile, but for this initial version, we decided that making it limited to Desktop was okay (since, realistically, people who are doing frontend responsive testing, are most likely doing it on a wider display).