如何使用Javascript检测浏览器操作系统？

Question

如何使用Javascript检测浏览器操作系统？

5

我对JavaScript一无所知，对编程也不是特别了解，但我想创建一个页面来检查用户的操作系统，如果他们正在使用移动操作系统（iPhone, Android等），则将其转发到移动网站，如果他们正在使用计算机，则将其转发到正常网站。这是我做的页面：

 <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>

基本上，它的作用是检查所有主要的计算机操作系统，如果不是其中之一，就将用户发送到移动网页，但如果是其中之一，就将用户发送到计算机网站。

请问这个页面/脚本中的错误/问题是什么？

谢谢， Luke

- Luke

看看CSS媒体类型。单个HTML页面，在不同的设备类型上采用不同的样式。 - BalusC

根据@BalusC的评论，我想指向这个答案，提供了一些关于媒体查询的信息，并链接到A List Apart中相关的文章。 - David Thomas

7个回答

7

其他评论都是正确的，但我认为你问题的根源在于这里：

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

当重新格式化时

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

这相当于

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

(因为 indexOf("foo")!=-1 的意思是 "找到了 foo" )。

你能看出这里的逻辑错误吗？

这就是为什么你应该遵循其他答案的建议：格式化你的代码使其易读，并且（在可能的情况下）使用现有的库。合理使用 CSS 也会让你受益。

- Cameron Skinner

5

我可能有点晚了，但还是来说一下：

我创建移动站点的主要原因是为了兼容不同屏幕尺寸的设备。使用JavaScript根据用户的屏幕尺寸重定向到不同的链接非常简单，在index.html中添加以下代码即可 - Apache团队可能会不喜欢，所以我提前警告你这不是最有效的方法，但对我的目的已经足够。

<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>

愉快编码！

- TheCodingNarwhal

5

问题在于你的括号使用不正确。请尝试使用以下代码替换：

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"
}

- Klaus Byskov Pedersen

4

请勿在客户端使用这些重定向，我建议你在此处使用脚本： http://detectmobilebrowser.com/。

- netadictos

是的，在此期间，开始将您的密码/用户数据库存储在这里：xyz-pass-store@gmail.com - Christian

抱歉，这是关于什么的？ - netadictos

3

这种解决方案已不再推荐使用！ 我建议使用“浏览器特性检测”，它可以检测浏览器是否支持某些功能。如果不支持，则将其重定向到兼容版本的网站。从长远来看，这样更安全，因为当浏览器更新以包含新功能时，它将允许使用最佳版本的网站。

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

- Eric

3

这将向您展示如何使用JavaScript进行浏览器检测，这并不难。它实际上不会告诉您操作系统，但由于它知道是否是手机或计算机上的浏览器，因此在指向移动站点时非常有用，就像您想要的那样。 http://www.javascriptkit.com/javatutors/navigator.shtml

- Blake

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bobince · Accepted Answer

这个脚本存在什么问题？

几乎一切都有问题。从if语句中缺失的括号，到过时的"language" 属性，再到可能导致页面无法跳转的JavaScript重定向，整个基于粗糙用户代理嗅探的重定向思路都有问题。

你的策略将在Windows Mobile（包含“Windows CE”），Windows Phone，iPhone/iPad（包含字符串“like Mac OS X”）和Android设备（包含“Linux”）上失败。这已经覆盖了主要移动操作系统中的很大一部分，更不用说那些可能没有这些标记的桌面浏览器了。

你可以通过针对要检测的特定情况进行嗅探来改进此方法。请参见此列表以了解现有内容概述。

当“移动”设备类别包含从功能手机到大屏幕平板电脑的所有东西时，将所有“移动”设备视为相同的是不合理的。现代移动浏览器非常适合呈现普通HTML页面，尤其是如果您通过使用流式布局和手持样式表来减少必要内容宽度来鼓励辅助功能。