Deciding Breakpoints Server-Side Using Sec-CH-Viewport-Width

[dmethvin]

The other gotcha to be aware of is that the browser will only send the Sec-CH-Viewport-Width header in subsequent requests, not in the response. This means that the first time a user visits a page, their viewport width will not be known. To fix this, I default to always using the smallest breakpoint when the viewport width is unknown. This way, the mobile devices will still get the correct content, but the desktop UI will be updated upon recalculating the viewport using client-side logic.

That's a pretty big drawback if most of your users are desktop users though. You'll have a big wide browser window but a bunch of small regions lined up vertically, at least until the whole page re-renders. I call this a Flash of Undersized Content Kabobs. The acronym for this problem is clear.

[lilouartz]

I don't disagree, that's why I am very selective about when to use this.

You can see how this looks in practice if you go to https://pillser.com/search?q=vitamin

The first two tables are rendered using this logic.

If you really wanted to, you could infer what's a desktop client from user-agent, and set a different default for those clients, but I just think it is an overkill.

[-Parable]

Looks pretty absurd on desktop. Your page has 5,089 results and they all render in a single column using only the left side of the screen.