Auto detect mobile browser (via user-agent?)?

Question

How can I detect if a user is viewing my web site from a mobile web browser so that I can then auto detect and display the appropriate version of my web site?

Answer 1

Hello,

To answer your question specifically:

You obtain a user agent string using navigator.userAgent in JavaScript or the HTTP_USER_AGENT environment variable on the server and parse it accordingly.

This is also known as "browser sniffing", and it's a very bad idea. In fact, it's no longer a practice these days since web standards and technologies have advanced, evolved and improved so much since the days when browser sniffing was introduced.

The 5 reasons why browser sniffing is a bad idea are:

1. String parsing is tough
2. There are many browsers to handle
3. Reduced scalability and increased maintenance
4. Browser masquerading
5. It’s rarely required

The above quote and list were taken from this awesome article from SitePoint (from 2009): 5 Reasons Why Browser Sniffing Stinks

Mozilla Developer Network (MDN) also states how a bad idea browser detection is:

Serving different Web pages or services to different browsers is usually a bad idea.

Here's the link to MDN: Browser detection using the user agent

I recommend you talk to an experienced developer so they can provide more insight based on your project needs. I can certainly help with that :)

Hope this helps.

Regards.