I made this little viewport logger: https://viewport-logger.netlify.app/

I'd really appreciate it if you could visit it on your devices โ€” especially small screens โ€” because I want to use the data to illustrate just how much screen fragmentation there is.

Please share with your pals too!

๐ŸšจEdit: this is now closed. Thanks everyone: we got > 100k datapoints!

CodePen - Andyโ€™s viewport logger

Got the initial 1000 records down and grouped them by size: https://gist.github.com/Andy-set-studio/cee6b6426e3557afe298f089806aa663
Initial 1000 items, grouped

Initial 1000 items, grouped. GitHub Gist: instantly share code, notes, and snippets.

Gist
Initial 1000 items, grouped

Initial 1000 items, grouped. GitHub Gist: instantly share code, notes, and snippets.

Gist
@andy ๐Ÿคฆ๐Ÿปโ€โ™‚๏ธ
@andy nice idea. Will it result in a massive table or a statistic?
@jensgro that's a secret for now
@andy I loooove secrets ๐Ÿ˜‚
@andy I will be curious how many non-full-screen desktop browsers you get (which only works if you get screen size as well as viewport, but you can make some guesses either way).
@aardrian You've already busted my master plan, Adrian
@andy @aardrian You might be able to filter some of those out by looking at only devices with maxTouchPoints <= 1.

@callie
To filter desktops? Because my Surface Studio Laptop reports 256 navigator.maxTouchPoints and my Pixel 6 reports 5:

https://patrickhlauke.github.io/touch/tests/pointer-multitouch-detect.html

@andy

Pointer/multitouch detect

@andy Have fun with one maximized-mode Edge and one fullscreen Edge-viewport on 1080p ;)
@andy done, looking forward to the results.
@andy Done (iPad Pro & iPhone mini).
@andy Another mini waving. ... now waiting on the final output.
@andy I wish to subscribe to the results!
@nicd I'll make a nice page with them
@andy I don't know if the BBC release this info as part of @TheRealNooshu's regular posting of data, but they may do (or may have it) and that would be a really wide sample of it

@sil @andy

๐Ÿ˜

cc: @tdp_org

Any help with this data Neil?

@sil @TheRealNooshu that would be better than my data for sure

@andy having both viewport width/height and screen density would be a great information.

Same viewport width/height but different densities can have a huge impact at least on responsive images.

@nhoizey true that. I'm only capturing minimum data to create a graphic tho
@andy I understand that, I'm also interested in seeing this graphic ๐Ÿ‘
@andy Done on an iPhone 13 mini. With different modes you get a wild amount of viewport sizes even from one iPhone
@andy uh, this is awesome, thank you
@andy If you add <meta name="disabled-adaptations" content="watch"> you can also log apple watches.
@andy @vasilis Seems like thatโ€™s not even necessary
@pb @andy the viewport size changes to, I believe 191px(!) when you add that meta tag.
@vasilis @andy Oh, because of course it does
@pb @andy Correction, 161px by 139. That last number is dynamic, it changes when you scroll on a longer page.
@vasilis @andy ๐Ÿคฏ I assume the dimensions also depend on the physical size of the watch?
@pb @andy I think there are watches with different sizes indeed. I guess they have different resolutions.
@andy Interesting to see that even the same mobile device could have different viewpoints width for full screen contents. Height difference was expected, but this was the first time I had realized that width can also be different on the same physical screen size. Different browsers on a same device have a lot of non-obvious differences.
@autiomaa Iโ€™m only capturing width and height for this but that would be interesting
@andy Tried the page on the same mobile device with Vivaldi, Chrome, Brave, Firefox, Firefox Focus, Tor Browser. Almost all had different viewport height, even when using the same rendering engine.
@andy ๐Ÿฅฝ
@vintagesucks is it ok to use this screen cap in a slide?
@andy Sure!
@vintagesucks I appreciate that thank you. It illustrates โ€œyou never know where a user is visiting fromโ€ beautifully
@andy Indeed. Another example that comes to mind is split-screen browsers like Microsoft Edge or Arc (https://arc.net). Exciting ways to multitask for users, challenging viewports for developers.
Arc from The Browser Company

Experience a calmer, more personal internet in this browser designed for you. Let go of the clicks, the clutter, the distractions.

@andy
if you're wondering who the hell has a 441x376 viewport, it's me, the nerd with the Unihertz Titan
@andy @KevinMarks Done, x3. On the same device, the in-app browser, Safari, and Firefox Focus all gave different heights.
@andy this is probably way out of scope but for fun I tried it using the browsers in a couple of ereaders. They render the page itself but I don't think detection works on these. (edit- and wouldn't expect it to, but it was fun to try)
@chillicampari yeh probably doesn't support es6
@andy
interesting. compared the viewport of the three browsers installed on my android phone
opera - 360*606 (my default)
edge - 360*614
chrome - 360*662
@andy interestingly, same device, different sizes. First is the size reported in Ivoryโ€™s built in web browser on iOS, second is in Safari on the same device.
@samerfarha webview vs proper browser there I reckon
@andy same device rendering default and "Desktop site". Variation by design... albeit to work around poor adherance to standards in the first place.
@andy I'd suggest you to place a QR code on the page, so once a user open it on one device, it'd be easy to 'share' the page with the other devices.