Show HN: Test your website on 180+ device viewports (with multi-device mode)

Show HN: Test your website on 180+ device viewports (with multi-device mode)viewport-tester.com/...

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.

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 :)

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.

onassar · a year ago

Ahh bug related to how we detect mobile. Would ya mind reaching out at hello@viewport-tester.com so I can get a few more details on this?

altdataseller · a year ago

That’s not a bug. Thats a feature. When I request desktop view in my iphone, it should just treat me as a desktop user. I know its buggy. I know its a horrible experience but I just wanna see what its like.

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

onassar · a year ago

This should be fixed now.

troupo · a year ago

Mobile Safari set to "always show desktop version" still triggers this modal.

Edit: even if you click "Request mobile version", the modal is there

lbhdc · a year ago

Nice, that seems to be fixed now. Thanks!

I noticed another possible bug. When trying it out on your website, it reports an "Invalid URL" error.

account42 · a year ago

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.

Thanks for the comment @account42 Agreed that a really-great responsive site is one where specific viewport dimensions don't matter. One thing we've run into (and want to test for) is users mentioning they're using a specific device and having issues.

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.

throwaway481 · a year ago

Something doesnt seem right. This website loads fine on Chrome's inspector design previews, but looks broken here:

https://viewport-tester.com/?url=https%3A%2F%2Fespncricinfo....

Great find! I'll create an issue for this one. I'm guessing it's related to the media queries that are taking place (or possibly, JS). Will track this one and comment on your reply again once it's fixed.

butz · a year ago

Getting some CORS errors. E.g. https://www.gnome.org/ fails to load fontawesome icons. And there's an interesting bug where opening mobile menu loads a page.

Oh CORS… we’re still figuring out an approach on how to handle static assets that have restrictions. Sorry about that, but I assure it’s one of the top things we are going to address.

jeswin · a year ago

After clicking on four screen sizes.

> 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?

Whoops! That was only meant to stay in there for an unrelated feature. Removed :)

Thanks. Very useful app.

Dev_Olly · a year ago

Thank you for creating this! Impressed by multi-devices at once. Looking forward to seeing how this evolves!

Thanks @Dev_Olly! Feel free to leave a comment if you run into any issues!

doctorpangloss · a year ago

Are the viewports sized with or without browser chrome, like the address bar and bottom bar?

Great question! Right now, it doesn't take into consideration the browser or device address/bottom bars. We documented that here: https://github.com/bitcomplete/labs-delta-viewport-tester-vi... (Caveat #1).

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.

retrofuturism · a year ago

If I could toggle between different states of the top/bottom bars I would use this tool every day.

Deleted Comment

SBArbeit · a year ago

This is brilliant. Thanks for building it.

Thanks! If you run into any issues or have any ideas, please share :)