admin管理员组文章数量:1178553
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</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= ".html"
else location.href = ".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
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
Share Improve this question edited Oct 24, 2010 at 22:11 DGM 27k7 gold badges64 silver badges82 bronze badges asked Oct 24, 2010 at 14:05 LukeLuke 511 silver badge2 bronze badges 2- Have a look at CSS media types. Single HTML page, different styles depending on the device type. – BalusC Commented Oct 24, 2010 at 14:47
- Further to @BalusC's comment, I'd point you to this answer that provides some information on media queries, and links to A List Apart article on the same. – David Thomas Commented Oct 24, 2010 at 14:52
7 Answers
Reset to default 15What 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.
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.
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!
Don't use these redirections client-side, I advise you to take of the scripts here: http://detectmobilebrowser.com/
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
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
本文标签: htmlHow can I detect the Browser OS from JavascriptStack Overflow
版权声明:本文标题:html - How can I detect the Browser OS from Javascript? - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1738040348a2053686.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论