This should result in the website knowing that the screen is 7" inches (dots-per-inch / dots = inches) across and setting the style for small devices.

This requires the use of JavaScript to style a website.

Is that really an issue? Javascript is basically universally supported on the web.

Users with NoScript will just have to live without some functionality. I'm sure they are used to that already, since a large fraction of websites use JS for styling. (I use NoScript)

> Is that really an issue?

Setting aside the debate about separation of concerns. Yes, it has notable performance and UX implications.

> Users with NoScript will just have to live without some functionality.

Why should we prioritize OP's use case over that of NoScript users?

What I use is @media (pointer: coarse) and (hover: none) { If you have a mouse plugged in, you get the desktop design.

I don't differentiate by type of device. I just detect aspect ratio:

@media (min-aspect-ratio: 1/1) /* wide */

@media (max-aspect-ratio: 1/1) /* tall */

@media (aspect-ratio: 1/1) /* square */

And what do you think the aspect ratio tells you? People do use portrait orientation for monitors or windowed mode for browsers.

It tells me which axis is longer, so I can responsively move the menu there. Also I flow content differently - lists get columns if wide enough.

Here, play with your window width to see: https://hypertele.fi/0000000000000000