Right! If you've got a window that narrow, the only way the design will even work or layout correctly is with the "mobile" layout...

The bigger problem is people hiding functionality if you're in the mobile breakpoint. That's an issue: all functionality should be enabled, at least in some way IMO. Mobile should never be a second class citizen :)

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.

> If my browser window is the width of a mobile phone’s screen

It's not, is the thing.

I have a 23 inch screen for my 1080p screen. My phone has a 6ish inch diagonal.

When I make a window 960 x 1080, that's still something like 10 inches across and 11 inches tall. It's sheet-of-paper sized. I'm perfectly comfortable reading that as it was designed for a desktop layout.

> I have a 23 inch screen for my 1080p screen. My phone has a 6ish inch diagonal.

Do you sit as close to your monitor as you hold your phone?

I would say that half of my monitor, more accurately, is about the dimensions of an iPad at comfortable viewing distance.

Phones are far taller than half of a 1080p screen.

Half a monitor is: 960 x 1080, or 1:1.125 A iPhone is: 828 x 1792, or 1:2.164

So websites tend to shove a candybar shape into a nearly square sheet of paper and waste a lot of usable proportions for things like controls or hamburger menus.

Not GP, but yeah, about the same? From your phrasing I expect it's how close we hold our phones that differs though.

Not necessarily: the real-world size matters too. Desktop-sized UI is hard to hit on a touchscreen when shrunk; meanwhile mobile-sized UI wastes space when enlarged on a desktop monitor.

Do you also want the version for touch controls?