Scott KillenJun 23, 2023
Andy Bell

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

Jun 21, 2023 at 10:50amWeb
Show threadAndy BellJun 23, 2023
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
Show threadThainJun 23, 2023
@andy Maybe this one is from @heydon https://gist.github.com/Andy-set-studio/cee6b6426e3557afe298f089806aa663#file-data-json-L8 ? ๐Ÿ™‚
Initial 1000 items, grouped

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

Gist
Show threadMike AparicioJun 23, 2023
@andy ๐Ÿคฆ๐Ÿปโ€โ™‚๏ธ
Show threadAndy BellJun 23, 2023
@peruvianidol lmao i will allow it
Show threadJens GrochtdreisJun 21, 2023
@andy nice idea. Will it result in a massive table or a statistic?
Show threadAndy BellJun 21, 2023
@jensgro that's a secret for now
Show threadJens GrochtdreisJun 21, 2023
@andy I loooove secrets ๐Ÿ˜‚
Show threadCharis Rooda ๐ŸŒฟJun 21, 2023
@andy waving with my iPhone mini ๐Ÿ‘‹
Show threadAndy BellJun 21, 2023
@charis ๐Ÿ™Œ
Show threadSteve FrenzelJun 21, 2023
@andy done!
Show threadAdrian Roselli, pH0Jun 21, 2023
@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).
Show threadAndy BellJun 21, 2023
@aardrian You've already busted my master plan, Adrian
Show threadAdrian Roselli, pH0Jun 21, 2023
@andy well yay me. dammit.
Show threadCallie ๐Ÿณ๏ธโ€โšง๏ธJun 21, 2023
@andy @aardrian You might be able to filter some of those out by looking at only devices with maxTouchPoints <= 1.
Show threadAdrian Roselli, pH0Jun 21, 2023

@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

Show threadAliveDevilJun 21, 2023
@andy Have fun with one maximized-mode Edge and one fullscreen Edge-viewport on 1080p ;)
Show threadJust BobyJun 21, 2023
@andy Done, iPhone SE :)
Show threadStephanieJun 21, 2023
@andy done, looking forward to the results.
Show threadKevin FrostJun 21, 2023
@andy Done (iPad Pro & iPhone mini).
Show threadGarry AylottJun 21, 2023
@andy Done ๐Ÿ‘
Show threadEgor KloosJun 21, 2023
@andy Another mini waving. ... now waiting on the final output.
Show threadNicd Jun 21, 2023
@andy I wish to subscribe to the results!
Show threadAndy BellJun 21, 2023
@nicd I'll make a nice page with them
Show threadStuart LangridgeJun 21, 2023
@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
Show threadMatt HobbsJun 21, 2023

@sil @andy

๐Ÿ˜

cc: @tdp_org

Any help with this data Neil?

Show threadAndy BellJun 21, 2023
@sil @TheRealNooshu that would be better than my data for sure
Show threadNicolas HoizeyJun 21, 2023

@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.

Show threadAndy BellJun 21, 2023
@nhoizey true that. I'm only capturing minimum data to create a graphic tho
Show threadNicolas HoizeyJun 21, 2023
@andy I understand that, I'm also interested in seeing this graphic ๐Ÿ‘
Show threadkaiserkiwi Jun 21, 2023
@andy Done on an iPhone 13 mini. With different modes you get a wild amount of viewport sizes even from one iPhone
Show threadEtcetera Type CoJun 21, 2023
@andy uh, this is awesome, thank you
Show threadVasilisJun 21, 2023
@andy If you add <meta name="disabled-adaptations" content="watch"> you can also log apple watches.
Show threadAndy BellJun 21, 2023
@vasilis TIL!
Show threadPhilippJun 21, 2023
@andy @vasilis Seems like thatโ€™s not even necessary
Show threadAndy BellJun 21, 2023
@pb @vasilis hell yeh!
Show threadVasilisJun 22, 2023
@pb @andy the viewport size changes to, I believe 191px(!) when you add that meta tag.
Show threadPhilippJun 22, 2023
@vasilis @andy Oh, because of course it does
Show threadVasilisJun 22, 2023
@pb @andy Correction, 161px by 139. That last number is dynamic, it changes when you scroll on a longer page.
Show threadPhilippJun 22, 2023
@vasilis @andy ๐Ÿคฏ I assume the dimensions also depend on the physical size of the watch?
Show threadVasilisJun 22, 2023
@pb @andy I think there are watches with different sizes indeed. I guess they have different resolutions.
Show threadDaniel SchildtJun 22, 2023
@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.
Show threadAndy BellJun 22, 2023
@autiomaa Iโ€™m only capturing width and height for this but that would be interesting
Show threadDaniel SchildtJun 22, 2023
@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.
Show threadNikolas EversJun 22, 2023
@andy ๐Ÿฅฝ
Show threadAndy BellJun 22, 2023
@vintagesucks is it ok to use this screen cap in a slide?
Show threadNikolas EversJun 22, 2023
@andy Sure!
Show threadAndy BellJun 22, 2023
@vintagesucks I appreciate that thank you. It illustrates โ€œyou never know where a user is visiting fromโ€ beautifully
Show threadNikolas EversJun 22, 2023
@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.

Show threadAndy BellJun 22, 2023
@vintagesucks yep true that!
Show threadacetone_kittenJun 22, 2023
@andy
if you're wondering who the hell has a 441x376 viewport, it's me, the nerd with the Unihertz Titan
Show threadAndy BellJun 22, 2023
@acetone_kitten I appreciate it!
Show threadAnthony SoraceJun 22, 2023
@andy @KevinMarks Done, x3. On the same device, the in-app browser, Safari, and Firefox Focus all gave different heights.
Show threadDeeAnn LittleJun 22, 2023
@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)
Show threadAndy BellJun 22, 2023
@chillicampari yeh probably doesn't support es6
Show threadื—ื ืŸ ื›ื”ืŸ โ€ข Hanan CohenJun 22, 2023
@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
Show threadSamer FarhaJun 22, 2023
@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.
Show threadAndy BellJun 22, 2023
@samerfarha webview vs proper browser there I reckon
Show threadnzjamesJun 22, 2023
@andy same device rendering default and "Desktop site". Variation by design... albeit to work around poor adherance to standards in the first place.
Show threadTomer Cohen ๐Ÿ––Jun 23, 2023
@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.
Show threadAndy CarolanJun 23, 2023
@andy Done!