Skip to content

Instantly share code, notes, and snippets.

View mfehrenbach's full-sized avatar
✌️

Michael Fehrenbach mfehrenbach

✌️
View GitHub Profile
@mfehrenbach
mfehrenbach / chrome-device-dimensions.md
Last active April 11, 2024 22:15
Modern device dimensions for Chrome DevTools.

Modern Device Dimensions for Chrome DevTools

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!

before-after

Nest Hub Max? Come on. I dropped a bunch of devices that were older and/or close to these dimensions. It obviously doesn’t cover everything (sorry Android/Chrome), but offers a decent spread/increments for common 2023/2024 viewports.