Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

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

viewport-tester.com

Post reply on HN
Print view View original

41–50 of 53 posts

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

#41

Post by onassar »

doctorpangloss wrote: post #37
onassar wrote: post #33

Earlier quoted context omitted.

Interesting: can you elaborate on this? Would love to better understand it, so we can consider adding this.

This is like that scene in Star Wars where Luke asks questions and Yoda just closes his eyes, fades away and dies. 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…

Haha funny analogy. What you and @alwa said makes sense: thanks for sharing that. It's related to Caveat #1 I mentioned above, but I like the idea of being able to toggle on/off the header/footer, to simulate real-world scrolling behaviour. I got that added to our list.

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

#42

Post by onassar »

alwa wrote: post #39
onassar wrote: post #33

Earlier quoted context omitted.

Interesting: can you elaborate on this? Would love to better understand it, so we can consider adding this.

I am not the person who originally asked for this, but I’d want to scan my eyes over conditions: * 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

Thanks for this @alwa. It definitely helped me better understand the question. I commented below @doctorpangloss but agreed: portrait/landscape mode are vital, and that's already on our roadmap.

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

#43

Post by westurner »

Brajeshwar wrote: post #21

This reminded me of a very similar one but for the desktop from a few years back. Here you go; https://responsively.app Source at https://github.com/responsively-org/responsively-app

shot-scraper is a CLI tool for HTML render snapshots with --height --width and --scale-factor (--retina ~= --scale-factor=2.0) args, and a -j/--javascript option to run JS before taking the screenshot.

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)

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

#44

Post by onassar »

lbhdc wrote: post #16
onassar wrote: post #15

Earlier quoted context omitted.

Haha funny! Yeh we disabled that, in part, because it can result in an infinite loop.

Hahahahahaha, ahhh that makes sense. I didn't think about it getting suck in a loop.

:)

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

#45

Post by onassar »

westurner wrote: post #43
Brajeshwar wrote: post #21

This reminded me of a very similar one but for the desktop from a few years back. Here you go; https://responsively.app Source at https://github.com/responsively-org/responsively-app

shot-scraper is a CLI tool for HTML render snapshots with --height --width and --scale-factor (--retina ~= --scale-factor=2.0) args, and a -j/--javascript option to run JS before taking the screenshot. 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…

This is awesome: thanks for these resources! We'll take a look at Cloudflare Browser Isolation for sure. We've played with screenshot tools at specific viewport dimensions etc, but it's not often the right fit for when we're doing interactive frontend responsive updates. That aside though, the screenshot APIs could be a great integration to be able to download/save screenshots of specific viewports.

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

#46

Post by westurner »

onassar wrote: post #45
westurner wrote: post #43

Earlier quoted context omitted.

shot-scraper is a CLI tool for HTML render snapshots with --height --width and --scale-factor (--retina ~= --scale-factor=2.0) args, and a -j/--javascript option to run JS before taking the screenshot. 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…

This is awesome: thanks for these resources! We'll take a look at Cloudflare Browser Isolation for sure. We've played with screenshot tools at specific viewport dimensions etc, but it's not often the right fit for when we're doing interactive frontend responsive updates. That aside though, the screenshot APIs could be a great integration to be able to download/save screenshots of specific viewports.

DevTools has a list of default viewport sizes, but they change from browser release to release. Is there a better way or an existing [YAML] file schema to generate a list of viewport configurations to import into DevTools?

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

#47

Post by onassar »

westurner wrote: post #46
onassar wrote: post #45

Earlier quoted context omitted.

This is awesome: thanks for these resources! We'll take a look at Cloudflare Browser Isolation for sure. We've played with screenshot tools at specific viewport dimensions etc, but it's not often the right fit for when we're doing interactive frontend responsive updates. That aside though, the screenshot APIs could be a great integration to be able to download/save screenshots of specific viewports.

DevTools has a list of default viewport sizes, but they change from browser release to release. Is there a better way or an existing [YAML] file schema to generate a list of viewport configurations to import into DevTools?

We looked into this, and we couldn't find a way to do so, but we've open sourced the data (here: https://github.com/bitcomplete/labs-delta-viewport-tester-vi...) so if you are able to find a way to do so, that could be a great option.
Post reply on HN