Hacker News Reader

Comment by abhishekjha | Hacker News Reader

I was wondering. Isn't the page rendered on mobile and desktop based on user-agents? How would that work now?

The typical way this is done these days is by media queries in CSS, so you'd write a rule for styling based on screen width, like

        @media (max-width: 550 px) {
           body {
              background-color: white;
           }
        }

turns the background white on small screens.

gp is likely asking about how servers decide to redirect to the m.* version instead of the desktop version (or in some cases serve a different mobile version under the same domain), in which case, yes, it’s usually user agent sniffing.

There not phasing out User-Agent strings entirely, they're actually upgrading them: https://github.com/WICG/ua-client-hints

It looks like there's more fine grained control in the new version.

Javascript-only is not an upgrade.

UA strings have never been an accurate indication. If you're not using JS, then you probably have no reason to be sniffing the UA string to detect browser features, since most of those features are JS-related anyway.

It's an upgrade for the people who actually need to get an indication of the supported features and APIs of the user's browser. Otherwise, you should be using media queries.

One exception: you might want to user sniff IE and serve a completely different version due to all the CSS problems. (I know you can use IE-only comments too, but I’ve been in the situation where making a modern version simultaneously IE9-compatible was just too frigging maddening.)

A bigger, site-breaking one from further up in this thread: https://news.ycombinator.com/item?id=22685632

Detecting dumb search crawlers, that don't support major features required for my webapp, and displaying a fallback splash has been the only reasonable way I've found.

If you want to just change the styling and layout of the page depending on the user's device, then you can use css's media queries[0]. But if you want to serve two totally different pages (one for mobile and another for desktop), then I don't see how it can be done without JS or reading the user agent.

[0] : https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queri...

If you want to serve two totally different pages, you use two totally different URLs, and don't try to second-guess what the user asked for.

Not usually, no. CSS media queries are used to format according to display size. But as a sibling here has indicated, client hints will replace the user agent here.

I thought it used Javascript to detect screen size. At least it should react to resize events and if the dimensions are something that align with mobile, it should switch to mobile mode.

AFAIK it's also done using CSS

In a lot of cases you shouldn't even use Javascript for this, responsive layouts can be built using CSS media queries based on viewport size.

More advanced webapps might occasionally need to do something fancier than that if the mobile vs desktop functionality is (for some reason) substantially different instead of just rearranged.

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queri...

Reply on news.ycombinator.com