There should IMO be a preference sent, "I'm on a portable, touch-enabled device". I'm guessing it doesn't exist because it would add a bit to the fingerprint.
No, it's not how it's done. And there is generally no logic trying to see if it's a mobile or not. One just have various designs for various sizes. When he has a 700px wide display, what else can the website do than collapse the content when it's not enough space for it?
It’s honestly been a significant improvement over dedicated mobile layouts and for the most part works pretty well.
This is the suggested way because if you check the device width you know that they are on a small device and thus probably mobile but your styling changes for small windows (less wide windows) do not get applied, so 'best practice' is to check the actual screen width. Hardly anyone checks the height because for web development height is generally not that important.
But this is often not useful because a lot of web solutions style things based on JavaScript and CSS and while the CSS will rerender automatically based on changing the screen size the JavaScript needs to detect you've changed the screen size and then rerender. So then there is a discussion as to how many people really resize the windows and do we need to catch this resize to do a rerender even though doing so is irritating and can be a resource hog (fixable by extra code but maybe better not to code at all!)
But there are lots of other ways to detect if you are on a mobile device, you can detect if touch screen events are enabled etc. but then what if you have one of those weird desktops that became possible a few years ago (I nearly wrote popular instead of possible) where your laptop's monitor also has touch screen events.
As a general rule it is best to do things based on the capacity of the system, and not by what type of system it is, but as the capabilities of our systems exist in infinite combinations it follows some things will just fall through no matter how exacting you try to be - maybe especially if you try to be too exacting.
I used to insist that designers never say "phone, tablet, desktop" and instead say "small, medium and large" but it never stuck.
That's what the user-agent is[0]. And all major browser engines have/had a Mobile token on relevant devices.
[0]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_de...
[0] https://www.zdnet.com/article/google-to-phase-out-user-agent...
The website is saying "if your screen is at least this big, I'm going to show you the version for big screens". The OP has an unusual setup where their big screen is reporting as a smaller screen.
Not necessarily, because the “smaller screen” layout tends to be linked to the touch one e.g. larger active targets, while the “large screen” layout is optimised for precise pointing devices (mice) and may be nigh impossible to interact with using fingers.
Layouts need to fit a size, not a device, so that's why media queries based on the screen size are usually the best approach. If I resize my browser to make it smaller, I should get a layout to match that. If I'm using Safari on iPad, docked to the side of the screen, I should get a layout to match that. These are all about screen sizes, not "mobile vs desktop".
For testing interaction cabailities, there are the @media (pointer: coarse) and @media (hover: hover) media queries for testing touch vs mouse, and hover capabilities, but it's important to not rely on these for mobile vs desktop layouts otherwise tomorrow a MS Surface user will post "Just because I have a touch screen, doesn't mean I'm on a phone".
There’s really no other information since “physical” dimensions are completely fake: a CSS inch is 96 CSS pixels which are “one pixel at 96 dpi at an arm’s length”.
Something as simple as “use-case: handheld | bellyheld | desktop” property? Css designers missed this opportunity completely.