This is the beginning of the end for the UA string. As more and more UA reductions are deployed, the UA hints will become more useful and eventually depreciate the UA string entirely.
And don't suggest me to use the same markup for both desktop and mobile with adaptive styles. More often than not this ends up being equally terrible on both kinds of devices.
My experience is generally (though not always) the exact opposite. It’s usually the case that when designers and implementers took the care to ship a properly responsive design, they’ve produced a design that adapts well to many factors. Designs which treat different device classes differently tend to be rigid, and fail to anticipate subtle differences or factors within those device classes.
I hesitate to link to the snotty site most commonly used to point this out (though I will if anyone asks), but HTML is responsive by default. Knowing this, and building upon it, is a great way to start learning how to build responsive pages that work really well.
Here's an example from my own project: same post, different layouts. https://imgur.com/a/7uOy7II
If you must make the distinction, it’s a media query away:
@media (any-pointer: coarse) {
/* this is a touch screen or other device which would benefit from larger tap targets */
}
@media (any-pointer: fine) {
/* this is a device with a mouse, trackpad, or other similar high precision pointer input */
}
@media (any-pointer: coarse) and @media (any-pointer: fine) {
/* this is both */
}
> Moreover, phones are mostly vertical and computer screens are mostly horizontal.
These are wild assumptions which also would better be served by a media query (aspect-ratio, min-aspect-ratio, max-aspect ratio, min-height, min-width). This will also better support other devices like tablets, as well as users like me who browse on desktop with a window much taller than it is wide.
> There's much difference between the two interaction paradigms if you want to provide a fitting UX for both.
Of course. But there’s no need to serve different markup to accommodate them. Besides the aforementioned media queries, you can do quite a lot to accommodate different viewport sizes and quite a lot else with eg grid or flexbox. You just have to know which tools to use for your use case, or how to discover them.
More often than not, I immediately go and switch out of Mobile site for pretty much everything I visit on mobile.
Features are missing, functionality is broken or gone, they force text/page sizes that don't work for me and block zooming (Firefox thankfully allows me to override that b.s now), and they serve "Install our App!" overlays.
Doordash I found is like this - some stores use them for white-labelled Delivery and SMS/Email you a link to the tracking page for your order.
I click the link on my desktop, I get a standard page, it shows a tracking map.
I click the link on my phone, I get a mobile version of the page which does have a tracking map, but the entire screen is covered with an overlay that says "Install our App!" with no dismiss option and you have to try to make out the driver's location through the 80% opaque overlay.
> Sites that wish to serve mobile-specific sites using UA-CH can do that using the Sec-CH-UA-Mobile headers that are sent by default on every request.
What am I missing?
I can't imagine Google would be doing this without some sort of back-channel method of tracking this exact info. They're likely just removing this info from visibility to other websites, giving themselves a competitive advantage. Man, that sounds a little paranoid, but...