These are modern “Emulated Devices” (a.k.a. responsive dimensions) for Chrome DevTools’ Mobile Device Viewport Mode.
They are specifically Apple devices, subtracting for recent Safari UI (as in window.innerWidth/Height), and cleverly sorted with some dark-arts unicode shenanigans. (This glitchy, unloved portion of the tools sorts lexicographically, because of course it would.) Ergonomics!
Note
Updated June 2025 with some notes from folks below! TL;DR: use Vibranium!
| <link rel="shortcut icon" width=32px> | |
| <canvas style="display: none" id="loader" width="16" height="16"></canvas> | |
| <script> | |
| class Loader { | |
| constructor(link, canvas) { | |
| this.link = link; | |
| this.canvas = canvas; | |
| this.context = canvas.getContext('2d'); | |
| this.context.lineWidth = 2; |
I've done the same process every couple years since 2013 (Mountain Lion, Mavericks, High Sierra, Catalina) and I updated the Gist each time I've done it.
I kinda regret for not using something like Boxen (or anything similar) to automate the process, but TBH I only actually needed to these steps once every couple years...