* Lay out content based on the viewport width, in CSS pixels.

* Use larger tap targets for coarse pointers (https://developer.mozilla.org/en-US/docs/Web/CSS/@media/poin...).

This is wrong because the viewport width is not the same as the monitor width or the DPI: especially on big monitors running the browser fullscreen is very hard to use (my browser rarely exceeds more than ~50% width on a 2560x1440 monitor and even when i use a 1366x768 monitor - which btw is at 22", not some tiny laptop one - i very rarely use it maximized).

As for why it is wrong, it is because you can't rely on it to make a Mobile vs Desktop distinction - i already provided an example why.

It's still not clear to me where you think this approach gives bad results?

The precise vs coarse isn't helpful either for something like this because this isn't just about clicking vs tapping, it is about how the end result looks - and there are PCs with both very small monitors and very big monitors (and relatively large monitors with low DPI or small monitors with very high DPI). CSS pixels only help for setting sizes/positions, but not layout.

AFAIK the best that can be done nowadays is resolution media queries but that isn't available everywhere (at least according to caniuse).

Of course in practice i expect none of the above to be used and have my browser simply zoom out whenever i reach many sites just because i do not want to maximize my browser :-/

Usage while walking/moving vs. sitting/standing at a desk.

Most "mobile" usage is actually stationary, typically seated. If you really need to change layout based on motion you can use the accelerometer, but I can't see why you would?

what would be really nice would be element-size-based media queries. you can use javascript to do it but that sucks