There's also a big problem where the mobile layout will tend to make controls huge to present a reasonable size touch target. This is unnecessary on the desktop, and may even result in less information fitting on screen than before switching to the mobile layout.

Thats a fun one to solve!

   @media (hover: none) and (pointer: coarse) {

That allows the dev to select for devices that do not have a mouse and such rely on touch targets, to increase the sizing. I've been implementing this myself recently in our web application, while still allowing us to change the layout to fit the narrow width!

I'm sure there are some devices it doesn't fit perfectly for though. This stuff is capital-H hard.

> capital-H hard

You mean quote-unquote Hard?

I wish.

The implementations for these have some... complications, the device sets we now deal with are huge, and making sure there are no idiosyncratic bugs that creep up when using them is legitimately a fair bit of work.