Streaming live at 10am (PST)

Designing for very short browser viewports (responsive by viewport height)

Hey All.

Im wondering if you guys have any solutions for dealing with very wide and short browser sizes.
I have a co-worker who leaves the Mac Dock open always, and thus her viewport size is 1380x580px.
This ends up calling the larger 1200-1400 breakpoint size, which is usually meant to fill screens about 1440x900 (typical 13" MBP) or iPads at 1366x1024.

I can’t find any stats out there about common viewport sizes (everybody reports screen sizes - which is essentially useless since most people don’t use a browser on desktop in fullscreen mode)

I really don’t want to have to design for such a super wide aspect, and then ruin the experience for users who commonly use a more normal aspect ratio for their browser window.

I know I can write custom media queries that utilize viewport height, or aspect ratio to adjust styles.
But it seems like a ridiculous amount of work to test not only at 5-7 breakpoint widths, and then double that to test each width with an extra small height.

Just wondering if there’s any hacks or tricks out there to make this easier.
Something like, if the aspect is greater than 2:1, set the page scale to 75% or something?

I’m kinda stumped at how to approach this challenge.


Also @webflow - This is just more proof that we desperately need custom breakpoints in the software.
I’ve encountered similar problems with the 768-992 breakpoint, as this width can represent both Portrait Tablets, but also Landscape desktop browsers.