How can I detect the Browser OS from Javascript?

Question

I know nothing about javascript, and not a whole lot about programming, but I wanted to create a page which checked the user's os, and if they are using a mobile OS (iphone, android, etc...), forward them to a mobile website, and if they are using a computer, forward them to the normal website. Here is the page I made:

 <head> 
<title>OS Check | website.web.org</title> 

<SCRIPT LANGUAGE = "javaScript"> 

if (navigator.appVersion.indexOf("Win")!=-1) && (navigator.appVersion.indexOf("Mac")!=-1) && (navigator.appVersion.indexOf("X11")!=-1) && (navigator.appVersion.indexOf("Linux")!=-1) location.href= "http://website.web.org/mobile/index.html"

else location.href = "http://website.web.org/Home.html"

</SCRIPT> 
</head>

Basically, what its meant to be doing is checking all of the major computer OSs, and if its not one of them, sending the user to the mobile webpage, but if it is one of them, sending them to the Computer site.

Can someone please tell me what the error/problem in this page/script is?

Thanks, Luke

Have a look at CSS media types. Single HTML page, different styles depending on the device type. — BalusC, Oct 24 '10 at 14:47
Further to @BalusC's comment, I'd point you to [this answer](http://stackoverflow.com/questions/3893342/do-iphone-android-browsers-support-css-media-handheld/3893391#3893391) that provides *some* information on media queries, and links to [A List Apart article on the same](http://www.alistapart.com/articles/return-of-the-mobile-stylesheet). — David Thomas, Oct 24 '10 at 14:52

score 15 · Answer 1 · answered Oct 24 '10 at 14:43

What is wrong with this script?

Yeah, pretty much everything.

From the missing parentheses on the if statement, to the old-school language attribute, to the potentially-navigation-breaking JavaScript-redirect, to the whole idea of redirecting based on crude user-agent sniffing.

Your strategy will fail for Windows Mobile (contains “Windows CE”), Windows Phone, iPhone/iPad (contains the string “like Mac OS X”), and Android devices (contains “Linux”). That's a pretty good coverage of major mobile OSes to fail on, not to mention the desktop browsers that might not include any of those tokens.

You might be able to improve this by sniffing for particular cases you want to detect. See this list for an overview of what exists.

Treating all “mobile” devices as the same is unlikely to make sense when that category encompasses everything from barely-internet-capable featurephones to large-screen tablets. Modern mobile browsers are quite capable of rendering normal HTML pages, especially if you encourage accessibility by using liquid layout, and handheld-stylesheets to reduce necessary content width.

Not to mention that relatively a lot of mobile browsers have JS disabled. — BalusC, Oct 24 '10 at 16:05
Indeed. At the very least, plain links should be included in the ``. If you do have to go with a separate interface and sniffing (JS or otherwise), you will certainly need a manual method/link for the user to pick their interface manually, because any sniffing technique is going to fail a good proportion of the time. — bobince, Oct 24 '10 at 16:12

score 7 · Answer 2 · answered Oct 24 '10 at 22:16

The other comments are all valid, but I think the root of your problem is this:

if (navigator.appVersion.indexOf("Win")!=-1) && (navigator.appVersion.indexOf("Mac")!=-1) && (navigator.appVersion.indexOf("X11")!=-1) && (navigator.appVersion.indexOf("Linux")!=-1)

when reformatted is

if (navigator.appVersion.indexOf("Win")!=-1)
    && (navigator.appVersion.indexOf("Mac")!=-1)
    && (navigator.appVersion.indexOf("X11")!=-1)
    && (navigator.appVersion.indexOf("Linux")!=-1)

which is equivalent to

if (isWindows
    && isMac
    && isX11
    && isLinux)

(because indexOf("foo")!=-1 means "found foo").

Can you see the logic error here?

That's why you should follow the advice of the other answers: format your code so it's readable, and (where possible) use an existing library. Sensible use of CSS is also your friend.

score 5 · Answer 3 · answered Dec 06 '12 at 13:02

I might be a little too late, but here goes:

My main reason for creating a mobile site is to be compatible with devices with different screen sizes. Pretty straight forward with JavaScript to redirect users to different links based on their screen size, just add this in your index.html - Apache boys gonna hate, so I better warn you this is not the 'most efficient' way of doing it, but it's good enough for my purpose.

<html>
<head>
<meta http-equiv="refresh" content="0;document.location" />
</head>
<body>

<script language="javascript" type="text/javascript">// <![CDATA[
if (screen.width <= 699) {
document.location = "LINK TO YOUR MOBILE SITE";
}

else{ 
       document.location.href = "LINK TO YOUR DESKTOP SITE"
}
// ]]></script>
</body>

</html>

Happy coding!

score 5 · Answer 4 · answered Oct 24 '10 at 14:13

The problem is that your parenthesis are wrong. Try this instead:

if ( navigator.appVersion.indexOf("Win")!=-1 
     && navigator.appVersion.indexOf("Mac")!=-1 
     && navigator.appVersion.indexOf("X11")!=-1 
     && navigator.appVersion.indexOf("Linux")!=-1 ){
       document.location.href= "http://website.web.org/mobile/index.html";
}
else{ 
       document.location.href = "http://website.web.org/Home.html"
}

score 4 · Answer 5 · answered Oct 24 '10 at 15:08

4

Don't use these redirections client-side, I advise you to take of the scripts here: http://detectmobilebrowser.com/

answered Oct 24 '10 at 15:08

netadictos

7,602
2
42
69

Yeah, while at it, start storing your password/user database here: xyz-pass-store@gmail.com – Christian Oct 25 '10 at 01:20
Sorry, what is all this about? – netadictos Oct 25 '10 at 06:54

Eric · Answer 6 · 2018-03-18T20:47:27.760

This solution is no longer recommended! I would use the "browser feature detect", which detects if the browser supports certain features. If it does not, then redirect them to a compatible version of the web site. It is safer in the long run because it will allow the best version of the website to be used when browsers are update to include new features.

https://developer.mozilla.org/en/Browser_Feature_Detection

score 3 · Answer 7 · answered Oct 25 '10 at 01:04

This will show you how to use JavaScript for Browser Detection, its not that hard. It won't actually tell which OS but since it will know if its a browser on a phone or computer it will be useful in directing to a mobile site like you wanted.

http://www.javascriptkit.com/javatutors/navigator.shtml

How can I detect the Browser OS from Javascript?

7 Answers7