Menu
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
522
Detect Operating System With the userAgent Property in JavaScript. If we want to track a little detail about the user's used browser and platform, we can go for the userAgent property with the navigator object. This special feature returns a string containing the browser's name, version, and platform name.
To detect the operating system on the client machine, one can simply use navigator. appVersion or navigator. userAgent property. The Navigator appVersion property is a read-only property and it returns a string which represents the version information of the browser.
You can use the navigator. appName and navigator. userAgent properties. The userAgent property is more reliable than appName because, for example, Firefox (and some other browsers) may return the string "Netscape" as the value of navigator.
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.
120
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.
42
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"
}
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!
41
Don't use these redirections client-side, I advise you to take of the scripts here: http://detectmobilebrowser.com/
33
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
27
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
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
