Comment by elashri
3 years ago
My web development knowledge is very limited. But isn't this the main method where simple websites (most static generators) used to decide if the user is browsing from a mobile or not and serve a version based on that?
I would appreciate it if someone explain what other things people do to tackle this, or if I'm completely wrong?
Most responsive design is based on screen dimensions with CSS media queries these days, not on the actual class of device.
Although really they should be using a pointer media query. Lots of sites I see randomly turn into mobile versions on desktop as soon as you resize the window narrow.
Though I can see justifications for giving people a different UI depending on whether they use a touch screen or a mouse.
The modern solution is to use CSS with media queries. You tell the client how the site is supposed to look on various screen sizes. The client applies the rules without leaking any information about which rules it chose to apply.
That's mostly done client-side these days; having the server treat clients differently doesn't happen as much anymore.
I think media queries have been the way to do that for awhile. Or I think there's some javascript trick to do it.
The server now needs to respond with the Accept-CH header specifying it wants the client to send the mobile client header by including the "UA-Mobile" value. A compliant client will then send the Sec-CH-UA-Mobile header in its next request with either the value "?0" or "?1".
Not supported on iOS, which is a good chunk of the mobile traffic you’re trying to identify.
You have to do a split approach. Last I knew only Chrome-based browsers support the new UA headers. Firefox and Safari only support the User-Agent header which you have to check for the presence of "Mobi".
[dead]