CODEWITHSUNDEEP
phpjavascriptbrowser-detection
Ben Carey
Ben Carey

Reputation: 16968

Browser Detection with Javascript

Reasoning for this Question

I am aware that browser detection can never be 100% reliable as the User Agent header can always be forged, however, I am not bothered by this.

Although there are many questions on this topic, they all seem to be quite old, so to get an up to date answer I felt I should ask this question again.

I am currently detecting the browser name and version server side using the PHP browscap, and then returning the name and version into javascript variables (not a very good method). The reason why I need to do this is simply to display a message to visitors if they are not using a supported browser.

Current method (something similar):

<script type="text/javascript">
    var browser = new Array();
    browser['browser'] = '<?php echo $browser_name; ?>';
    browser['version'] = '<?php echo $browser_version; ?>';
    browser['error'] = '<?php echo $browser_error; ?>';
</script>

It would be much better to do this client side as the browscap can be quite slow, and it would prevent me having to pass values into javascript variables from PHP. If you think using PHP is a better method then please state in your answer, this is just my opinion.

Question

Therefore, my question quite simply, is the following link a reliable method for determining the browser name and version?

Javascript Detect

I am aware that new browsers will need to be added to this, this does not bother me. I am more concerned about whether the algorithm used is reliable.

Thanks in advance

UPDATE 1

To see what I mean, take a look at https://www.icloud.com/ in Internet Explorer 7 or less. You will receive a message saying that the browser is not supported. This is easy to do for IE as you can simply use the <!--[if gt IE..., however, I need to test all browsers.

Upvotes: 0

Views: 1061

Answers (6)

Christian
Christian

Reputation: 3988

This question needs an updated answer. I think the best option these days for client-side detection is WURFL.

Its an updated library of devices based on Useragents - think Browscap for the client side.

Load the JS and it returns JSON based on the device that requested the js. Perfect!

<script type="text/javascript" src="//wurfl.io/wurfl.js"></script>

Because it does the parsing on the WURFL server side, you need to load the js remotely and not save it in your dir tree.

A super easy

WURFL.is_mobile

is all it takes to determine mobile for example.

Good luck.

Upvotes: 1

Ben Carey
Ben Carey

Reputation: 16968

Explanation

After extensive research and discussing amongst other developers, it is clear that there is no reliable method for retrieving the browser name and version from the User Agent. This is down to several reasons:

  1. The format of a browsers User Agent can change at any time if the developers of the browser so wish to do so. This could immediately prevent some scripts from working correctly.
  2. Users can forge their User Agents to mimic other browsers, and therefore would appear to be using a browser they are not.

Possible Solutions

Whilst I hugely discourage the use of these scripts as they could stop working at the release of an update to any browser anytime, if you do wish to detect the browser name and version in Javascript then I would advise using this script:

Javascript Detect

However, the most reliable method for retrieving the details of the browser is without a doubt the browscap supplied by Gary Keith. The browscap project offers extensive information about each browser and OS gathered from the User Agent. It is very easy to implement and even easier to use. To read more, take a look at:

Gary Keith - Browscap

If you choose to use the browscap by Gary Keith, you will need to ensure it is updated weekly at the very least.

Answer

Whilst I am contradicting myself with this answer, it is clear that detecting the browser information with any sort of script is not advised. The only reliable method of browser detection is that of the Internet Explorer HTML conditions, and as stated, these only cover Internet Explorer.

Try to avoid browser specific functions and notices, and make use of the built in features such as:

media="only screen and (device-width: 768px)"

and

<!--[if IE 8]>I am IE 8<![endif]-->

Upvotes: 1

feeela
feeela

Reputation: 29932

The yepnopejs IE detection (!ie prefixes) works by utilizing the MS conditional comments.

A short snippet for detecting versions of IE prior to IE10 in JavaScript without resorting to user-agent sniffing.

while (
  div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->'
);
// …

https://github.com/SlexAxton/yepnope.js/blob/master/prefixes/yepnope.ie-prefix.js

yepnope usage example:

yepnope({
    load: ['normal.js', 'ie6!ie7!ie-patch.js'] // patch for ie6 or ie7 only
});

Upvotes: 0

Alessandro Minoccheri
Alessandro Minoccheri

Reputation: 35973

You can use a perfect plugin for this information written in jQuery (like javascript)

look at this link:

https://github.com/jquery/plugins.jquery.com

Be sure to do feature detection instead of browser detection when you want to determine if a certain feature is available in a browser, apply bugfixes, etc.

Upvotes: -1

otporan
otporan

Reputation: 1355

This does not look right, you can fetch browser information from Javascript. No need to mix JS and PHP code to do that.

You can do something like this to fetch, and detect user browser with just JavaScript:

var userAgent = navigator.userAgent.toLowerCase();
var old = false;

// Internet Explorer 7
if (userAgent.indexOf('msie 7.0b') !== -1) { old = true; }
else if (userAgent.indexOf('msie 7.0') !== -1) { old = true; }

// Internet Explorer 6
else if (userAgent.indexOf('msie 6.1') !== -1) { old = true; }
else if (userAgent.indexOf('msie 6.01') !== -1) { old = true; }
else if (userAgent.indexOf('msie 6.0b') !== -1) { old = true; }
else if (userAgent.indexOf('msie 6.0') !== -1) { old = true; }
...
// Detect any other browser versions you consider old

if(old = true) {
// Show notification and alert users that they are using old browser
}

This is how you can do it using JS, but you can also use HTML to achieve this:

<!--[if lte IE 6]>
   // include your .css style or do whatever you want to alert users their browser is old
<![endif]-->

Short answer to your question is YES, its wrong to detect user browser the way you do it, since you can do it with plain JavaScript, or even with HTML. No need to mix PHP and JS code here, and at the end, both PHP and JS will get the same UserAgent info.

Upvotes: 1

EM-Creations
EM-Creations

Reputation: 4301

You could try having a look at navigator.appName and navigator.userAgent.

Upvotes: 0

Related Questions